You can remove the default gutters between columns to create compact layouts by adding the class .g-0 on .row. This class removes the negative margins from row and the horizontal padding from all immediate children columns. Here’s an example: Example Breaking Columns to a New Line You can also create equal-width columns that span multiple rows by inserting…

You can even change the visual order of your grid columns without changing their order in actual markup. Use the class .order-last to order the column in last, whereas use the class .order-first to order the column at first place. Let’s checkout an example: Example You can also use the .order-* classes to order the grid columns depending on the order…

You can use the classes .justify-content-start, .justify-content-center, and .justify-content-end to align the grid columns horizontally at the left, center and right of a container, respectively. Let’s check out the following example to see how it works: Example Alternatively, you can use the class .justify-content-around to distribute grid columns evenly with half-size spaces on either end, whereas you can use the class .justify-content-between to…

The Bootstrap grid columns are also nestable, that means you can put rows and columns inside an existing column. However, the formula for placing the columns will be the same, i.e. the sum of column numbers should be equal to 12 or less within a single row. Example Creating Variable Width Columns You can use…

You can also create equal width columns for all devices (x-small, small, medium, large, x-large, and xx-large) through simply using the class .col, without specifying any column number. Let’s try out the following example to understand how it exactly works: Example Additionally, you can also set the width of one column and let the sibling columns automatically resize…

Similarly, you can create other layouts based on the above principle. For instance, the following example will typically create three column layouts for laptops and desktops screens. It also works in tablets in landscape mode if screen resolution is more than or equal to 992 pixels (e.g. Apple iPad). However, in portrait mode the grid…

The Bootstrap grid system is the fastest and easy way to create responsive website layout. What is Bootstrap Grid System? Bootstrap grid system provides an easy and powerful way to create responsive layouts of all shapes and sizes. It is built with flexbox with mobile-first approach. Also, it is fully responsive and uses twelve column system (12…

You can simply use the .container class to create a responsive, fixed-width container. The width of the container will change at different breakpoints or screen sizes, as shown above. Example Creating Fluid Containers You can use the .container-fluid class to create a full width container. The width of the fluid container will always be 100% irrespective of the devices…

In this tutorial you will learn how to create containers with Bootstrap. Creating Containers with Bootstrap Containers are the most basic layout element in Bootstrap and are required when using the grid system. Containers are basically used to wrap content with some padding. They are also used to align the content horizontally center on the…

Alternatively, you can also download the Bootstrap’s CSS and JS files from their official website and include in your project. There are two versions available for download, compiled Bootstrap and Bootstrap source files. Compiled download contains compiled and minified version of CSS and JavaScript files for faster and easier web development. The compiled version also includes optional JavaScript dependencies…