Bootstrap is the most popular front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs that automatically adjust themselves to look good on all devices, from small phones to large desktops.
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype so you need to include the HTML5 doctype at the beginning of the page along with the correct character set.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head>
Bootstrap is designed to be responsive to mobile devices. To ensure proper rendering and touch zooming, add the following tag inside the HTML head element.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap 4 is an upgrade to Bootstrap 3 and comes with similar wrapping containers, a powerful grid system, a flexible media object and responsive utility classes
Containers are the most basic layout element in Bootstrap and are required when using its default grid system. Choose from a responsive, fixed-width container whose max-width changes at each breakpoint or fluid-width which is 100% wide all the time.
While containers can be nested, most layouts do not require a nested container.<div class="container"> Some contents here... </div>
Fixed width containers appear horizontally centered in larger viewports with some margins on the left and right while in smaller viewports, they occupy the entire width.
<div class="container-fluid"> Some contents here... </div>
Full width containers always occupy the entire width of the viewport.
Bootstrap's grid system divides the total width of the viewport into 12 equal columns. You can group the columns together to create wider columns or use them individually. This grid system is responsive and the columns will re-arrange automatically depending upon the screen size.
| col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 |
| col 2 | col 2 | col 2 | col 2 | col 2 | col 2 | ||||||
| col 3 | col 3 | col 3 | col 3 | ||||||||
| col 4 | col 4 | col 4 | |||||||||
| col 6 | col 6 | ||||||||||
| col 12 | |||||||||||
Since, bootstrap 4 is built with flexbox, you can use a huge series of classes to define the colum width and layout or simply add a couple of <div>s to align them horizontally on their own with equal width.
The class row is the key class here which holds the css property display: flex which will force all the block elements i.e. divs inside it to align horizontally allocating equal width to each of them.
<div class="container">
<div class="row">
<div class="col">
Column 1 of 3
</div>
<div class="col">
Column 2 of 3
</div>
<div class="col">
Column 3 of 3
</div>
</div>
</div>
The example above will create three equal-width columns on all viewports which is the default behaviour of a flexbox. You can use responsive grid classes to redefine their layout for separate viewports.
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col | .col-sm | .col-md | .col-lg | .col-xl |
| Total number of possible columns | 12 | ||||
| Gutter width | 30px (15px on left and right side of a column) | ||||
The classes above can be combined to create more dynamic and flexible layouts.
Flexbox by default forces all its child elements to have equal width and align from left to right on the same row. You can break a row and force some of its child elements appear in another row using class w-100. This will insert an element with forced 100% width inside a row and thus, forcing the elements succeeding it to to appear in another row.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Flexbox grid columns also allows you to define width for one or more columns within a row and force others automatically resize to have equal width.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-5">Large Column that takes up 5 out of the 12 possible columns</div>
<div class="w-100"></div>
<div class="col-6">Large Column that takes up 6 out of the 12 possible columns</div>
<div class="col">Column</div>
</div>
</div>
Columns can also be set up to take up width in relation to its content. Use col-auto to force it take up width based on the natural width of a columns content.
You can use responsive grid classes to create responsive layout where you can even add multiple classes together to display them in different layouts depending upon the viewport.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
<div class="col-sm-6 col-md-4"></div>
</div>
</div>
0 Comment
Leave a comment