Bootstrap Grid Tutorial

Intro

Bootstrap provides a highly effective mobile-first flexbox grid solution for designing designs of any proportions and looks . It's formed on a 12 column design and provides numerous tiers, one for each and every media query variety. You can certainly employ it along with Sass mixins or else of the predefined classes.

Among the most essential component of the Bootstrap platform making it possible for us to make responsive website page interactively converting if you want to regularly install the width of the screen they get featured on still looking perfectly is the so called grid structure. Things that it usually handles is presenting us the feature of generating tricky formats putting together row and also a special variety of column elements kept within it. Just imagine that the detectable size of the screen is split up in twelve matching parts vertically.

The best ways to make use of the Bootstrap grid:

Bootstrap Grid Table utilizes a number of containers, rows, and columns to format and straighten content. It's constructed with flexbox and is fully responsive. Below is an illustration and an in-depth look at precisely how the grid integrates.

How you can put into action the Bootstrap grid

The aforementioned scenario makes three equal-width columns on little, middle, big, and also extra large devices working with our predefined grid classes. Those columns are focused in the web page having the parent

.container

Here's the ways it works:

- Containers provide a solution to focus your internet site's items. Make use of

.container

for concentrated width or

.container-fluid

for complete width.

- Rows are horizontal bunches of columns which ensure your columns are definitely organized effectively. We make use of the negative margin method regarding

.row

to make certain all your web content is lined up properly down the left side.

- Web content ought to be put within columns, and also simply just columns can be immediate children of rows.

- Thanks to flexbox, grid columns free from a specified width is going to immediately layout using identical widths. For example, four instances of

.col-sm

will each automatically be 25% wide for small breakpoints.

- Column classes signify the several columns you wish to use outside of the possible 12 per row. { Therefore, in case you need three equal-width columns, you are able to work with

.col-sm-4

- Column

widths

are set in percentages, in such manner they're constantly fluid and sized relative to their parent element.

- Columns possess horizontal

padding

to create the gutters in between special columns, still, you can surely remove the

margin

out of rows and also

padding

from columns with

.no-gutters

on the

.row

- There are five grid tiers, one for every responsive breakpoint: all breakpoints (extra little), little, standard, large size, and extra huge.

- Grid tiers are built upon minimum widths, signifying they relate to that one tier and all those above it (e.g.,

.col-sm-4

puts on small, medium, large, and extra large devices).

- You are able to utilize predefined grid classes or else Sass mixins for more semantic markup.

Recognize the limits plus defects about flexbox, like the incapability to apply a number of HTML elements as flex containers.

Sounds very good? Outstanding, let us go on to observing everything with an instance. ( discover more)

Bootstrap Grid Table capabilities

Basically the column classes are generally something like that

.col- ~ grid size-- two letters ~ - ~ width of the element in columns-- number from 1 to 12 ~

The

.col-

constantly continues being the same.

Whenever it approaches the Bootstrap Grid Template sizings-- all of the realizable sizes of the viewport ( or else the visual part on the screen) have been actually split up to five selections just as comes next:

Extra small-- widths under 544px or 34em ( that comes to be the default measuring unit in Bootstrap 4

.col-xs-*

Small – 544px (34em) and over until 768px( 48em )

.col-sm-*

Medium – 768px (48em ) and over until 992px ( 62em )

.col-md-*

Large – 992px ( 62em ) and over until 1200px ( 75em )

.col-lg-*

Extra large-- 1200px (75em) and anything greater than it

.col-xl-*

While Bootstrap applies

em

-s or

rem

-s for explaining the majority of sizes,

px

-s are utilized for grid breakpoints and container widths. This is because the viewport width is in pixels and does not alter with the font size.

See how parts of the Bootstrap grid system do a job all around several gadgets with a helpful table.

How parts of the Bootstrap grid system work

The fresh and various from Bootstrap 3 here is one extra width range-- 34em-- 48em being actually assigned to the

xs

size shifting all the widths one range down. This way the sizes of 75em and over get free from a specified size in this way in Bootstrap 4 the Extra Big size becomes introduced to deal with it.

All the elements designated along with a certain viewport width and columns take care of its overall size in width for this viewport and all above it. When the width of the display screen goes below the represented viewport size the elements stack over one another filling all width of the view .

You may likewise specify an offset to an element by means of a defined variety of columns in a specific display screen scale and on top of this is done with the classes

.offset- ~ size ~ - ~ columns ~

.offset-lg-3

as an example. This was of identifying the offsets is new for Bootstrap 4-- the prior version used the

.col- ~ size ~-offset- ~ columns ~

syntax.

A few factors to consider anytime putting up the markup-- the grids incorporating columns and rows have to be inserted inside a

.container

elements. There are actually two varieties of containers obtainable -- the set

.container

element which size continues to be untouched unless the next viewport size breakpoint is hit and

.container-fluid

which spans all width of the viewport.

Personal heirs of the containers are the

.row

features which in order become loaded in with columns. Supposing that you turn out to put features with greater than 12 columns in width within a single row the last features which width exceeds the 12 columns boundary will certainly wrap to a new line. Multiple classes maybe utilized for a single element to style its visual aspect in different viewports additionally.

Auto format columns

Incorporate breakpoint-specific column classes for equal-width columns. Put in any number of unit-less classes for each and every breakpoint you need and every column is going to be the same width.

Identical size

As an example, right here are two grid styles that used on every device and viewport, from

xs

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>

Putting one column size

Auto-layout for the flexbox grid columns additionally indicates you can easily set up the width of one column and the others will quickly resize around it. You may work with predefined grid classes ( while revealed here), grid mixins, or possibly inline widths. Take note that the additional columns will resize despite the width of the center column.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width web content

Working with the

col-  breakpoint  -auto

classes, columns have the ability to size on its own built upon the natural width of its content. This is very helpful for one line web content like inputs, numbers, and the like. This, with a horizontal alignment classes, is really helpful for focusing configurations having uneven column sizes as viewport width updates.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Equal size multi-row

Establish equal-width columns that extend multiple rows by simply placing a

.w-100

precisely where you really want the columns to break to a new line. Develop the splits responsive by means of putting together the

.w-100

by having some responsive display utilities.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Responsive classes

Bootstrap's grid provides five tiers of predefined classes to get building complex responsive designs. Customize the size of your columns on extra small, small, medium, large, as well as extra large gadgets however you want.

All breakpoints

To grids that are the same from the tiniest of devices to the largest sized, use the

.col

and

.col-*

classes. Indicate a numbered class the moment you desire a specially sized column; on the other hand, don't hesitate to stay on

.col

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

Loaded to horizontal

Applying a particular package of

.col-sm-*

classes, you can absolutely make a basic grid structure that starts out stacked on extra small gadgets before becoming horizontal on pc ( ordinary) devices.

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Combine and suit

Do not need your columns to simply pile in several grid tiers? Put to use a combo of numerous classes for each and every tier as wanted. Notice the good example listed here for a best concept of exactly how all of it works.

<div class="row">
  <div class="col col-md-8">.col .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Placement

Apply flexbox positioning utilities to vertically and horizontally straighten columns. ( more info)

Vertical placement

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontal alignment

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

No spacing

The gutters within columns in our predefined grid classes can be gotten rid of with

.no-gutters

This eliminates the undesirable

margin

-s from

.row

as well as the horizontal

padding

from every one of close children columns.

Here's the source code for creating such varieties. Keep in mind that column overrides are scoped to just the first children columns and are actually targeted by means of attribute selector. While this creates a more specified selector, column padding can easily still be more modified together with space utilities.

.no-gutters 
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] 
    padding-right: 0;
    padding-left: 0;

In practice, here's specifically how it appears. Keep in mind you have the ability to constantly make use of this along with all various other predefined grid classes (including column widths, responsive tiers, reorders, and further ).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Column wrap

Supposing that greater than 12 columns are set inside a single row, each and every set of added columns will, as one unit, wrap onto a new line.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Reseting of the columns

With the fistful of grid tiers obtainable, you are certainly expecteded to face troubles where, at specific breakpoints, your columns don't clear pretty correct as one is taller in comparison to the other. To correct that, apply a combo of a

.clearfix

and responsive utility classes.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix hidden-sm-up"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

As well as column clearing up at responsive breakpoints, you may possibly will want to reset offsets, pushes, and pulls. Check out this in action in the grid example.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Re-ordering

Flex order

Use flexbox utilities for handling the visual order of your web content.

<div class="container">
  <div class="row">
    <div class="col flex-unordered">
      First, but unordered
    </div>
    <div class="col flex-last">
      Second, but last
    </div>
    <div class="col flex-first">
      Third, but first
    </div>
  </div>
</div>

Offsetting columns

Shift columns to the right using

.offset-md-*

classes. These particular classes escalate the left margin of a column by

columns. For example,

.offset-md-4

moves

.col-md-4

over four columns.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Push and pull

Conveniently transform the setup of our integrated grid columns with

.push-md-*

and

.pull-md-*

modifier classes.

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Material positioning

To roost your material together with the default grid, add in a new

.row

and set of

.col-sm-*

columns just within an existing

.col-sm-*

column. Embedded rows ought to include a pack of columns that amount to 12 or fewer (it is not expected that you apply all 12 accessible columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Employing Bootstrap's source Sass information

If working with Bootstrap's origin Sass files, you have the opportunity of applying Sass variables and mixins to generate customized, semantic, and responsive webpage designs. Our predefined grid classes employ these identical variables and mixins to present a whole suite of ready-to-use classes for fast responsive arrangements .

Possibilities

Variables and maps control the variety of columns, the gutter width, and also the media query point. We utilize these to produce the predefined grid classes detailed above, and also for the custom made mixins below.

$grid-columns:      12;
$grid-gutter-width-base: 30px;

$grid-gutter-widths: (
  xs: $grid-gutter-width-base, // 30px
  sm: $grid-gutter-width-base, // 30px
  md: $grid-gutter-width-base, // 30px
  lg: $grid-gutter-width-base, // 30px
  xl: $grid-gutter-width-base  // 30px
)

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins are applied together with the grid variables to develop semantic CSS for specific grid columns.

@mixin make-row($gutters: $grid-gutter-widths) 
  display: flex;
  flex-wrap: wrap;

  @each $breakpoint in map-keys($gutters) 
    @include media-breakpoint-up($breakpoint) 
      $gutter: map-get($gutters, $breakpoint);
      margin-right: ($gutter / -2);
      margin-left:  ($gutter / -2);
    
  


// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutters: $grid-gutter-widths) 
  position: relative;
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  min-height: 1px; // Prevent collapsing

  @each $breakpoint in map-keys($gutters) 
    @include media-breakpoint-up($breakpoint) 
      $gutter: map-get($gutters, $breakpoint);
      padding-right: ($gutter / 2);
      padding-left:  ($gutter / 2);
    
  


@mixin make-col($size, $columns: $grid-columns) 
  flex: 0 0 percentage($size / $columns);
  width: percentage($size / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($size / $columns);


// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($size, $columns: $grid-columns) 
  margin-left: percentage($size / $columns);


@mixin make-col-push($size, $columns: $grid-columns) 
  left: if($size > 0, percentage($size / $columns), auto);


@mixin make-col-pull($size, $columns: $grid-columns) 
  right: if($size > 0, percentage($size / $columns), auto);

Some example use

You can easily reshape the variables to your very own custom-made values, or else simply just work with the mixins having their default values. Here's an illustration of employing the default setups to produce a two-column configuration with a space among.

See it at work in this provided example.

.container 
  max-width: 60em;
  @include make-container();

.row 
  @include make-row();

.content-main 
  @include make-col-ready();

  @media (max-width: 32em) 
    @include make-col(6);
  
  @media (min-width: 32.1em) 
    @include make-col(8);
  

.content-secondary 
  @include make-col-ready();

  @media (max-width: 32em) 
    @include make-col(6);
  
  @media (min-width: 32.1em) 
    @include make-col(4);

<div class="container">
  <div class="row">
    <div class="content-main">...</div>
    <div class="content-secondary">...</div>
  </div>
</div>

Modifying the grid

Employing our incorporated grid Sass maps and variables , it is really feasible to fully customize the predefined grid classes. Alter the amount of tiers, the media query dimensions, and the container widths-- after that recompile.

Gutters and columns

The variety of grid columns as well as their horizontal padding (aka, gutters) can possibly be customized via Sass variables.

$grid-columns

is used to create the widths (in percent) of every individual column while

$grid-gutter-widths

allows breakpoint-specific widths that are split evenly across

padding-left

and

padding-right

for the column gutters.

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

Possibilities of grids

Moving further the columns themselves, you may likewise modify the amount of grid tiers. Supposing that you wanted only three grid tiers, you 'd improve the

$ grid-breakpoints

and

$ container-max-widths

to something like this:

$grid-breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Whenever developing any type of changes to the Sass maps or variables , you'll need to save your developments and recompile. Doing so are going to out a new package of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities definitely will additionally be updated to use the custom made breakpoints.

Conclusions

These are truly the primitive column grids in the framework. Applying certain classes we can easily direct the special elements to span a determined number of columns depending on the real width in pixels of the viewable space in which the webpage becomes presented. And given that there are a a lot of classes specifying the column width of the items as an alternative to viewing everyone it is actually better to try to find out exactly how they really become created-- it's really simple to remember knowning simply just a couple of things in mind.