Bootstrap Layout System

1. Grid System

The Grid system in Bootstrap is a powerful and flexible way to create responsive layouts. It divides the page into rows and columns, allowing you to structure content in a 12-column format. The grid is responsive, which means it adapts to different screen sizes (such as phones, tablets, and desktops) without requiring custom CSS.

• 12 Columns: Bootstrap’s grid system is based on 12 columns. You can create custom column widths and nest columns within rows. By using these 12 columns, you can design flexible and responsive layouts.
• Row: A row is a container for columns. You use the class row to define a row, which acts as a wrapper for your column elements.
• Column (col): Columns are the building blocks inside a row. You define columns using col- classes. Columns can be flexible and adjust their width based on the screen size.

Basic Structure:

<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>

• container: It’s a wrapper that sets the width of the content, either fixed or fluid (full-width).
• row: The row class ensures that columns inside it align properly.
• col-md-4: Each of these columns takes up 4 out of the 12 grid units (so three equal-width columns in total).

2. Responsive Design (Breakpoints)

Bootstrap’s grid system is designed to be responsive, meaning it adjusts the layout based on the device’s screen size. There are five built-in breakpoints for different screen sizes:

• col-: For extra small screens (less than 576px). This is the default class if no screen size is specified.
• col-sm-: For small screens (≥576px).
• col-md-: For medium screens (≥768px).
• col-lg-: For large screens (≥992px).
• col-xl-: For extra-large screens (≥1200px).
• col-xxl-: For extra-extra-large screens (≥1400px).

By using these classes, you can specify how many columns a certain element should span across based on the screen size.

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

In this example:

• On extra small screens, each column will take up the full width (12 columns).
• On small screens, each column will take up half the width (6 columns).
• On medium screens, each column will take up one-third of the width (4 columns).
• On large screens, each column will take up one-fourth of the width (3 columns).

3. Container and Container-Fluid

• container: This class provides a fixed-width container that adapts to different screen sizes. It has predefined widths for different screen sizes (e.g., 1140px for large screens).
• container-fluid: This class makes the container full-width, always 100% of the viewport width, no matter the screen size.

<div class="container">
  <p>This is a fixed-width container.</p>
</div>

<div class="container-fluid">
  <p>This is a full-width container.</p>
</div>

The container class is used for normal content sections, while container-fluid is typically used when you want your content to span the entire width of the page.

4. Offset and Nesting Columns

• Offset: If you want to add an empty space or offset a column, you can use classes like offset-md-4 to move a column 4 columns to the right, leaving space on the left.

<div class="row">
  <div class="col-md-4 offset-md-4">
    <p>This column is centered.</p>
  </div>
</div>

This will place the column in the center of the row by offsetting it with 4 columns.

• Nesting Columns: You can also nest rows and columns inside one another. This is helpful when you want to create complex layouts.

Get Beyza Erdoğmuş’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example (Nested Columns):

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

In this case, the first column takes up 8 grid spaces, and inside it, there is another row with two columns (each taking up 6 out of 12 columns).

5. Flexbox and Utilities

Bootstrap 4 and later versions utilize Flexbox, a powerful layout tool, for more advanced and dynamic layouts. Flexbox allows elements to align and distribute space within a container.

• d-flex: Activates Flexbox on the container.
• justify-content-*: Aligns child elements horizontally (e.g., justify-content-center, justify-content-between).
• align-items-*: Aligns child elements vertically (e.g., align-items-center).

Example (Flexbox Layout):

<div class="d-flex justify-content-between">
  <div>Left Item</div>
  <div>Right Item</div>
</div>

This will place the two elements at the opposite ends of the container.

6. Hidden and Visible Elements (Responsive Visibility)

Bootstrap provides utility classes to show or hide elements based on the screen size:

• d-none: Hides the element on all screen sizes.
• d-sm-block, d-md-block, etc.: Shows the element on specific screen sizes.

Example (Hide on Mobile):

<div class="d-none d-md-block">
  <p>This will be hidden on small screens but visible 
on medium and larger screens.</p>
</div>

This example hides the content on small screens (less than 768px) but shows it on medium and larger screens.

7. Aligning Content with Spacing Utilities

Bootstrap includes various spacing utilities to easily control margins and padding, which can also help with layout management.

• m-*: Margin utilities (e.g., m-0, m-3).
• p-*: Padding utilities (e.g., p-2, p-4).
• mx-*, my-*: Horizontal or vertical margin/padding.
• mt-*, mb-*: Margin-top or margin-bottom.

Example (Spacing):

<div class="m-3 p-3">
  <p>This element has margin and padding.</p>
</div>

8. Alignment Utilities

With the help of alignment utilities, you can quickly align text and other elements within a container.

• text-center: Aligns text to the center.
• text-left: Aligns text to the left.
• text-right: Aligns text to the right.
• d-flex align-items-center: Vertically aligns elements.

<div class="text-center">
  <p>This text is centered.</p>
</div>

9. Offsets and Sizing with col

You can adjust the width of columns using the grid system and also control their visibility based on breakpoints. The grid layout in Bootstrap 4 and 5 allows you to create custom column widths, which are useful for complex layouts.

<div class="row">
  <div class="col-4">Column 1</div>
  <div class="col-8">Column 2</div>
</div>

This will create two columns where the first one takes up 4 out of 12 columns, and the second takes up 8 out of 12 columns.

Conclusion

The Bootstrap layout system offers a flexible and responsive way to design web pages. By using its grid system, utility classes, and responsive breakpoints, developers can create layouts that work across different screen sizes. Additionally, Flexbox and various utility classes make it easy to align, space, and control the layout without writing custom CSS. With Bootstrap, building responsive, adaptable layouts has never been easier.