Bootstrap - Layout

Grid System

Bootstrap's grid system is a tool for creating responsive layouts. It provides a way to structure your web pages into rows and columns, allowing you to create flexible and adaptive designs that look good on any device.

At the core of the grid system are three components: containers, rows, and columns. Containers are the outermost elements that wrap your content and provide a fixed width or full-width layout. Rows are used to group columns horizontally, while columns are the individual content blocks that make up your layout.

Bootstrap's grid system uses a 12-column layout, meaning that each row can be divided into up to 12 equal-width columns. You can set the width of each column using predefined classes, such as .col-md-4 for a column that spans 4 out of 12 units on medium-sized screens.

One of the features of Bootstrap's grid system is its responsive breakpoints. These breakpoints allow you to define different column widths and behaviors based on the screen size. By default, Bootstrap includes five breakpoints: extra small (xs), small (sm), medium (md), large (lg), and extra large (xl). You can use these breakpoints to create layouts that adapt to different devices, from smartphones to desktop monitors.

Container Classes

Bootstrap provides two container classes: .container and .container-fluid. The .container class creates a fixed-width container that centers your content on the page. It has predefined widths for each responsive breakpoint, ensuring that your layout remains consistent across different screen sizes.

The .container-fluid class creates a full-width container that spans the entire width of the viewport. This is useful when you want your content to take up the full available space, regardless of the screen size.

Choose the right container based on your design requirements. If you want a fixed-width layout with consistent margins, use .container. If you prefer a full-width layout that adapts to the screen size, go with .container-fluid.

Grid Classes

The foundation of Bootstrap's grid system lies in the .row and .col-* classes. The .row class is used to create a horizontal group of columns. It clears any floats and applies negative margins to counteract the padding applied to the columns within it.

Inside a .row, you can use the .col-* classes to define the width and behavior of each column. The asterisk (*) in .col-* represents the responsive breakpoint and the number of columns you want the element to span.

Example: Column spanning

.col-md-6

would create a column that spans 6 out of 12 units (50% width) on medium-sized screens and above. You can combine different column classes to create responsive layouts that adapt to various screen sizes.

Bootstrap also provides classes for controlling the sizing and alignment of columns. You can use classes like .col-auto to create columns that automatically adjust their width based on the content, or .col-{breakpoint}-{width} to specify a fixed width for a column at a specific breakpoint.

Responsive Grid

Bootstrap's grid system follows a mobile-first approach, meaning that the styles are defined for the smallest screen size first and then progressively enhanced for larger screens. This approach ensures that your layout looks good on mobile devices by default and then adapts to larger screens as needed.

To create responsive layouts, Bootstrap uses media queries and breakpoints. Media queries are CSS rules that apply different styles based on the characteristics of the device, such as screen width. Bootstrap's breakpoints are predefined screen widths at which the layout changes.

By combining the responsive grid classes with media queries, you can show, hide, or rearrange elements based on the screen size.

Example: Hiding and showing elements

.d-none .d-md-block

to hide an element on small screens and show it on medium screens and above.

This allows you to create layouts that adapt to different devices, providing an optimal user experience across a wide range of screen sizes.

Flexbox

Bootstrap has flexbox, a layout system that lets you make flexible and responsive designs. Flexbox lets you distribute space and align elements in a container, making it easy to create dynamic and adjustable layouts.

In Bootstrap, you can use flexbox by adding the .d-flex class to a container element. This class sets the display property to flex, turning the container into a flex container. You can also use .d-inline-flex to create an inline flex container.

Once you have a flex container, you can control the layout of its child elements (flex items) using flexbox classes provided by Bootstrap.

Flex Container Classes

Bootstrap provides classes for controlling the behavior of a flex container:

Class Description
.d-flex Creates a block-level flex container.
.d-inline-flex Creates an inline-level flex container.
.flex-row Sets the flex direction to row (default).
.flex-row-reverse Sets the flex direction to row-reverse.
.flex-column Sets the flex direction to column.
.flex-column-reverse Sets the flex direction to column-reverse.
.flex-wrap Allows flex items to wrap to new lines.
.flex-nowrap Prevents flex items from wrapping (default).
.flex-wrap-reverse Allows flex items to wrap in reverse order.
.justify-content-* Controls the alignment of flex items along the main axis.
.align-items-* Controls the alignment of flex items along the cross axis.
.align-content-* Controls the alignment of flex lines when there is extra space on the cross axis.

These classes let you control the direction, wrapping, justification, and alignment of flex items within a flex container.

Flex Item Classes

Bootstrap provides classes for controlling individual flex items:

Class Description
.flex-grow-* Determines how much a flex item should grow relative to other items.
.flex-shrink-* Determines how much a flex item should shrink relative to other items.
.flex-basis-* Sets the initial size of a flex item before distributing remaining space.
.align-self-* Overrides the default alignment of a single flex item.
.order-* Changes the order of a flex item within the container.

By using these classes on flex items, you can fine-tune their behavior and create more complex and dynamic layouts.

Flexbox in Bootstrap provides a flexible and intuitive way to create responsive layouts. With the combination of flex containers and flex items, you can easily control the direction, alignment, and distribution of elements within your design. Try different flexbox classes to create layouts that adapt to various screen sizes and content requirements.

Layout Utilities

Bootstrap provides layout utility classes that let you control spacing, display, vertical alignment, and responsive floats in your web pages. These utility classes let you change your layout without writing custom CSS.

Spacing Classes

Bootstrap has classes for setting margin and padding on elements. These classes follow a naming convention: .m-* for margin and .p-* for padding. The asterisk (*) shows the size and direction of the spacing.

Spacing Classes Example

<p class="m-3">This paragraph has a margin of 1rem on all sides.</p>

<p class="pt-2">This paragraph has a padding of 0.5rem at the top.</p>

Bootstrap also provides responsive spacing classes that let you set different spacing values based on the screen size. These classes follow the format .{property}{sides}-{breakpoint}-{size}, where:

  • {property} is either m for margin or p for padding.
  • {sides} is one of:
    • t for top
    • b for bottom
    • l for left
    • r for right
    • x for left and right
    • y for top and bottom
    • blank for all four sides
  • {breakpoint} is one of the responsive breakpoints (sm, md, lg, xl).
  • {size} is a number from 0 to 5, showing the size of the spacing.

Responsive Spacing Classes Example

<p class="mt-md-3">This paragraph has a top margin of 1rem on medium-sized screens and above.</p>

Display Classes

Bootstrap provides display utility classes that let you control the display behavior of elements. These classes follow the format .d-{value}, where {value} can be one of the following:

  • none to hide an element
  • inline to display an element inline
  • inline-block to display an element inline but allow setting width and height
  • block to display an element as a block-level element
  • flex to display an element as a block-level flex container
  • inline-flex to display an element as an inline-level flex container

Display Classes Example

<div class="d-none">This div is hidden.</div>

<div class="d-inline">This div is displayed inline.</div>

<div class="d-lg-none">This div is hidden on large screens and above.</div>

<div class="d-md-flex">This div is a flex container on medium screens and above.</div>

Vertical Alignment Classes

Bootstrap provides classes for controlling the vertical alignment of inline, inline-block, inline-table, and table cell elements. These classes follow the format .align-{value}, where {value} can be one of the following:

  • baseline to align the baseline of an element with the baseline of its parent
  • top to align the top of an element with the top of the tallest element on the line
  • middle to align the middle of an element with the middle of the parent
  • bottom to align the bottom of an element with the bottom of the lowest element on the line
  • text-top to align the top of an element with the top of the parent element's font
  • text-bottom to align the bottom of an element with the bottom of the parent element's font

Vertical Alignment Classes Example

<span class="align-middle">This text is aligned to the middle of its parent element.</span>

Float Classes

Bootstrap has classes for controlling the floating behavior of elements. These classes follow the format .float-{value}, where {value} can be one of the following:

  • left to float an element to the left
  • right to float an element to the right
  • none to remove any floating behavior

Float Classes Example

<div class="float-right">This div is floated to the right.</div>

<div class="float-md-right">This div is floated to the right on medium screens and above.</div>

<div class="float-lg-none">This div has no floating behavior on large screens and above.</div>

By using these layout utility classes, you can quickly change spacing, display, vertical alignment, and floating behavior in your Bootstrap-powered web pages. They offer a simple and flexible way to change your layout without writing custom CSS styles.

Responsive Layout Techniques

Bootstrap offers several responsive layout techniques that let you create flexible and adaptable designs. These techniques include stacked-to-horizontal layouts, column wrapping, column reordering, and offsetting columns.

Stacked-to-horizontal

Stacked-to-horizontal layouts are a common responsive design pattern where elements are stacked vertically on small screens and then transition to a horizontal layout on larger screens. Bootstrap makes this easy to implement using the .col-* classes for different breakpoints.

By applying different column classes to elements based on the screen size, you can change the width and behavior of columns. For example, you can use .col-12 to create a full-width column on small screens, and then use .col-md-6 to make it span half the width on medium screens and above.

Stacked-to-Horizontal Example

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

Column Wrapping

By default, Bootstrap's grid system will try to fit all columns in a single row. However, you can allow columns to wrap to new lines when there isn't enough space horizontally. This is done by simply adding more columns than the maximum of 12 in a row.

If the total width of the columns exceeds 12, the extra columns will automatically wrap to a new line. You can also use the .w-100 class to force a break at a specific point.

Column Wrapping Example

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

Column Reordering

Bootstrap lets you change the order of columns using the .order-* classes. These classes let you specify the order of each column within a row, giving you control over the visual arrangement of your content.

The .order-* classes range from .order-1 to .order-12, representing the order in which the columns should appear. You can also use .order-first and .order-last to place a column at the beginning or end of a row, respectively.

Column Reordering Example

<div class="row">
  <div class="col order-2">Column 1</div>
  <div class="col order-3">Column 2</div>
  <div class="col order-1">Column 3</div>
</div>

You can also use responsive ordering classes to change the order of columns based on the screen size. For example, .order-md-2 would set the order of a column to 2 on medium screens and above.

Offsetting Columns

Bootstrap provides .offset-* classes that let you create space between columns by offsetting them to the right. These classes work similarly to the column width classes, using the same responsive breakpoints.

To offset a column, you can use classes like .offset-md-3, which would move the column to the right by 3 column widths on medium screens and above. This is useful for creating asymmetrical layouts or adding visual spacing between columns.

Offsetting Columns Example

<div class="row">
  <div class="col-md-6 offset-md-3">Centered Column</div>
</div>

You can also use responsive offsetting classes to apply different offsets based on the screen size, giving you even more control over your layout.

These responsive layout techniques in Bootstrap provide a flexible and powerful way to create adaptable designs that look great on any device. By using a combination of stacked-to-horizontal layouts, column wrapping, column reordering, and offsetting columns, you can create dynamic and responsive web pages that adapt to different screen sizes and layout requirements.