Bootstrap Layout

Level : Beginner
Mentor: Shailendra Chauhan
Duration : 00:03:00

Layout:

Bootstrap provides a responsive layout structure that adapts to various screen sizes. It uses a 12-column grid system for creating flexible layouts.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Breakpoints:

Bootstrap's breakpoints define different screen sizes where your design might need adjustments. You can customize styles for each breakpoint.

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Column 1</div>
    <div class="col-sm-6 col-md-8">Column 2</div>
  </div>
</div>

Containers:

Containers in Bootstrap control the width of your content. You have the choice of using ‘.container’ for a fixed width or ‘.container-fluid’ for full width.

Example:

<div class="container">
  <!-- Content here -->
</div>
<div class="container-fluid">
  <!-- Fluid content here -->
</div>

Grid:

The grid system helps create responsive layouts by arranging content in rows and columns.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

Columns:

Columns in Bootstrap automatically adjust their width based on the number of columns within a row.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6">Half-width Column</div>
    <div class="col-md-6">Half-width Column</div>
  </div>
</div>

Gutters:

Gutters are the spacing between columns. Bootstrap provides classes to add or remove gutter spacing.

Example:

<div class="container">
  <div class="row g-3">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

Utilities:

Bootstrap utilities offer a variety of helper classes for common tasks like text alignment, margin, padding, and more.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-6 text-center">Centered Content</div>
    <div class="col-md-6 m-3">Margin</div>
  </div>
</div>

Z-index:

Z-index controls the stacking order of elements. Higher values appear on top of lower values.

Example:

.element {
  position: relative;
  z-index: 2;
}  
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this