What is Bootstrap
o Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
o It is absolutely free to download and use.
o It is a front-end framework used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins.
o It facilitates you to create responsive designs.
History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at [Link] was released
as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.
Why use Bootstrap
Following are the main advantage of Bootstrap:
o It is very easy to use. Anybody having basic knowledge of HTML and CSS can use
Bootstrap.
o It facilitates users to develop a responsive website.
o It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and
Opera etc.
What is a responsive website
A website is called responsive website which can automatically adjust itself to look
good on all devices, from smart phones to desktops etc.
What Bootstrap package contains
Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, and
background.
CSS: Bootstrap comes with the feature of global CSS settings, fundamental HTML
elements style and an advanced grid system.
Components: Bootstrap contains a lot of reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more.
JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins. You can
easily include them all, or one by one.
Customize: Bootstrap components are customizable and you can customize
Bootstrap's components, LESS variables, and jQuery plugins to get your own style.
Is Bootstrap Best?
Bootstrap is more than efficient to create a responsive and mobile first website but it
is not the best in the industry. There is an alternative of Bootstrap named [Link] which
is smaller, faster, and easier to use.
Websites that were built with a lot of CSS and JavaScript can now be built with a
few lines of code using Bootstrap. Bootstrap comprises of mainly three components:
CSS
Fonts
Javascript
Installing Bootstrap: There are two ways in which we can install Bootstrap. I will
talk about both ways of Installing Bootstrap. But before installing Bootstrap, we
must code a basic html document on which we would install Bootstrap. Here it is,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learning Bootstrap </title>
<meta name="description" content="Hello World">
</head>
<body>
<div> Hello World!</div>
<div> You're learning Bootstrap </div>
</body>
</html>
Method 1 (BootstrapCDN): This method of installing Bootstrap is fairly easy but it
requires Internet connection. It is highly recommended that you follow this method.
Step 1: Goto getbootstrap([Link] and click Getting Started . Scroll
down.
Step 2: Copy the <link> and paste it in the head section of the HTML
code.
Step 3:Copy the <script> tag and paste those things in the body section at
bottom position like the above code.
Step 4: Bingo! You’ve installed Bootstrap on your html document. To see the
changes on your document, try opening the page on a separate tab of your
browser and you can easily notice the difference between the two codes.
Though, not much of difference can be felt till now, but it would be apparent
in the later parts of the article. Here, the one on the left is without bootstrap and
the one on the right is with bootstrap installed.
Method 2(Compiled CSS and JS): This method of installing bootstrap is also easy
but it can work offline ( doesn’t require an internet connection ) but it might not work
for some browsers.
Step 1: Goto getbootstrap and click Getting Started. Click on the
Download Bootstrap button and download the compiled CSS and JS.
Step 2: [Link] file would get downloaded. Extract it and go into the distribution folder.
You would see 2 folders named CSS and JS. You can make your HTML file there and
then you must paste these links in their respective sections.
<link rel=”stylesheet” type=”text/css” href=”css/[Link]”> <script
src=”js/[Link]”></script> <script src=
“[Link] </script>
Bootstrap Grid System
Grid System: In the previous article we had learnt about Bootstrap and its
[Link], from this article, we are going to start with learning Bootstrap.
We are going to talk about the Bootstrap Grid System in this article.
Grid System: 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
Note: Output can be little difference as shown, it depend on your screen size.
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.
2. Rows: Rows must be placed within a ‘container’ or ‘container-fluid’
for proper alignment and padding. We use rows to create horizontal
groups of columns.
3. Columns: Grid columns are created by specifying the number of
twelve available columns you wish to span. For example, three equal
columns would use three “col-sm-4”.
4. Column Resets: With the four tiers of grids available, we are bound to
run into issues where at certain breakpoints, the columns don’t quite
clear right as one is taller( has more text) than the other column. A
command called clearfix is there which fixes any issues regarding that
viewport. We just need to write a div command with class clearfix after
the block where the column isn’t clearing right.
Let’s say we have an issue with the md and sm viewport. But if we are
using
But then it is causing problems for other viewport (maybe lg and xs) . So,
what we can do is make clearfix visible only for the md and sm block or
hide all other blocks (lg and xs).
or
5. Columns Offset: We can move the columns to the right by x columns
using col-md-offset-x in the class.
<div class="col-xs-3 col-sm-4 col-md-6 col-lg-1 col-lg-offset-2“>
This change results in making an offset of 2 grid columns before the fourth
column.
6. Nesting Columns: For nesting columns within a column, we need to
add a new row and set of columns. Nested rows should include a set of
columns that add up to 12 or less than that.
Supported Browsers:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"[Link]
<script src=
"[Link]
</script>
<script src=
"[Link]
</script>
<script src=
"[Link]
</script>
</head>
<body>
<header>
<div class="container">
<h1 style="color: green">GeeksforGeeks</h1>
<strong>
A computer Science portal for Geeks
</strong>
</div>
</header>
<div class="container">
<div class="row">
<div class="bg bg-primary w-100">
First row
</div>
</div>
<div class="row">
<div class="bg bg-success w-100">
Second row
</div>
</div>
<div class="row">
<div class="bg bg-primary w-100">
Third row
</div>
</div>
<div class="row">
<div class="bg bg-success w-100">
Fourth row
</div>
</div>
<div class="row">
<div class="bg bg-primary w-100">
Fifth row
</div>
</div>
</div>
<footer>
<hr />
<div class="container">
<p>
<a href="[Link]
Visit
</a>
our website
</p>
<p>
<a href="[Link]
Like
</a>
us on facebook
</p>
</div>
</footer>
</body>
</html>