Bootstrap is a free – open source css framework directed at responsive, mobile -frist front-end web developement. It contains html,css and (optionally) javascript-based design templates for typography, forms buttons navigation, and other interface components.
What bootstrap package includes?
- Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more.
- Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background.
- Customize − Customize Bootstrap’s components, fewer variables, and jQuery plugins to get your very own version.
- CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
- JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one.
what is bootstrap grid system?
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. You can use all combinations of values summing up to 12. You can use 12 columns each of width 1, or use 4 columns each of width 3 or any other combination.
Grid Classes:
The Bootstrap grid system has four classes that can be combined to make more flexible layouts:
- xs (<576px): For Portrait Mobile Phones.
- sm (>=576px): For Landscapes phones
- md (>=768px): For Tablets/Phablets
- lg (>=992px): For Small-sized Desktops/Laptops
- xl (>=1200px): For Larger-sized Desktops/Laptops
Components of Grid System:
We will be learning the Components of the Grid system one-by-one:
1.Containers:
Bootstrap requires a containing element to wrap site contents and house our grid system. The word ‘container’ is a container of row elements and row elements are ‘containers’ of the column elements. You will understand it more in the latter part of the article where we have dealt with columns.
Use ‘container’ for a responsive fixed width container and use ‘container-fluid’ for a full width container, spanning the entire width of your viewport.
Example
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<header>
<div class="container">
<h1 style="color: green">cotocus</h1>
<strong>devops</strong>
</div>
</header>
<footer>
<hr/>
<div class="container">
<p>
<a href="https://www.cotocus.org/">
Visit
</a>
our website
</p>
<p>
<a href="https://www.cotocus.org/">
Like
</a>
us on facebook
</p>
</div>
</footer>
</body>
</html>
output:-COTOCUS
output:- devops
Note: The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
Row:
Rows must be placed within a ‘container’ or ‘container-fluid’ for proper alignment and padding. We use rows to create horizontal groups of columns.