Posts

Showing posts from July 3, 2018

Bootstrap 4 Grid Examples

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Grid Examples ❮ Previous Next ❯ Below we have collected some examples of Bootstrap 4 grid layouts. Three Equal Columns Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each. col col col Example <div class="row">   <div class="col">col</div>   <div class="col">col</div>   <div class="col">col</div> </div> Try it Yourself » Three Equal Columns Using Numbers You can also use numbers to control the column width. Just make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns): col-4 col-4 col-4 Example <d...

Bootstrap 4 Grid - Extra Large

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> Bootstrap 4 Grid - Extra Large ❮ Previous Next ❯ XLarge Grid Example   Extra small Small Medium Large Extra Large Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- Screen width <576px >=576px >=768px >=992px >=1200px In the previous chapter, we presented a grid example with classes for small and medium devices. We used two divs (columns) and we gave them a 25%/75% split on small devices, and a 50%/50% split on medium devices and a 33%/66% split on large devices: <div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div> But on xlarge devices the design may be better as a 20%/80% split. Extra large devices are defined as having a screen width from 1200 pixels and above . For xlarge devices we will use t...