Bootstrap - Layout

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.

.col-md-6

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.

.d-none .d-md-block

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

Flex Container Classes

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

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:

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.

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.

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

<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

<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

<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

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

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.

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

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

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

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