What is Bootstrap (CSS Framework)
 |
| What is bootstrap grid system |
Bootstrap is a CSS framework created by Jacob Thornton and Mark Otto, former Twitter employees. Bootstrap contains build-in classes to develop mobile-first and responsive web pages. It is very helpful for developers as now developers don't need to write lengthy CSS files. It is used for front end responsive web design. Responsive means that when a web page is loaded in the browser, it adjusts its size automatically according to screen size. Using bootstrap classes, we write same code for mobile, desktop, tab, or other screens.
Bootstrap contains compiled and minified CSS and Javascript. Any developer having a basic knowledge of HTML and CSS can start learning Bootstrap. It is compatible with almost all modern browsers like google chrome, Mozilla Firefox, opera, internet explorer, etc.
You can use bootstrap in two ways.
Bootstrap CDN
Include the bootstrap CDN (Content Delivery Network) in your Html file. For this, you must be online while developing a website. It is recommended as Bootstrap new features or new versions automatically synced with your website.
Download Bootstrap
Download its latest version Bootstrap 5 from getbootstrap.com. This is offline development.
Create the first web page
Now create an HTML file as index.html and include the Html viewport meta tag in it as below.
Now include Bootstrap CDN files, CSS, and javascript in the head section of your HTML file as below.
Bootstrap Container
This is the main container containing the entire body section. Bootstrap provides two classes for containers.
- .container: It is responsive with fixed width.
- .container-fluid: It covers the full width of the underlined screen.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container" style="background-color: lightblue">
<h1>Continer Class</h1>
<p>Continer class make the div fixed but responsive</p>
</div>
<div class="container-fluid" style="background-color: lightblue">
<h1>Continer Fluid Class</h1>
<p>Continer-fluid class set div width equal to screnn full width</p>
</div>
</body>
</html>
Open and load index.html in browser. You can view difference between container and container fluid. Now change size of browser window. You can see the responsiveness of container.
Bootstrap Grid System
It is the most important feature because it provides responsiveness. Using it you can create up to 12 bootstrap columns across the page. These columns re-adjust width according to screen sizes.
Grid Classes
To set the width of each column, grid system provides four classes.
- .sx: Extra small width used for phone with screens less than 768px wide
- .sm: Small width used for tablets having screens equal to or greater than 768px wide
- .md: Medium width used for laptops having screens equal to or greater than 992px wide
- .lg: Large width used for laptops and desktops having screens equal to or greater than 1200px wide
|
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
.col-md-1 |
|
.col-md-2 |
.col-md-2 |
.col-md-2 |
.col-md-2 |
.col-md-2 |
.col-md-2 |
||||||
|
.col-md-3 |
.col-md-3 |
.col-md-3 |
.col-md-3 |
||||||||
|
.col-md-4 |
.col-md-3 |
.col-md-5 |
|||||||||
|
.col-md-4 |
.col-md-8 |
||||||||||
|
.col-md-12 |
|||||||||||
Now we will create 3 columns of equal width.
We can create any numbers of columns up to 12 of unequal width as below. Sum of all columns should be 12 as below.
Bootstrap Text Classes
Following are bootstrap default font-sizes
<p> 14px
<h1> 36px
<h2> 30px
<h3> 24px
<h4> 18px
<h5> 14px
<h6> 12x
Popular HTML tags styled by Bootstrap
<small> To create lighter text in heading
<mark> To highlight a text
<abbr> It is used to show abbreviation. On mouse hovering, it shows complete words.
<code> You can write code inside this tag
<kbd> Keyboard shortcut keys are usually written inside this tag
<pre> It style the text same as it is written including spaces, tabs, new line characters, etc
Output
Text color classes
Following text color classes are provided by bootstrap
- .text-muted
- .text-success
- .text-danger
- .text-info
- .text-primary
- .text-warning
Output
Text background color classes
Bootstrap provide below classes to apply text background color
- .bg-success
- .bg-primary
- .bg-info
- .bg-danger
- .bg-warning
Output
Classes to align Text
- .text-left
- .text-right
- .text-center
- .text-justify
<p class="text-left bg-primary">Text left aligned</p>
<p class="text-right bg-success">Text right aligned</p>
<p class="text-center bg-warning">Text center aligned</p>
<p class="text-justify bg-danger">Text justified:
This text is aliged as justified from left and right both side
</p>
Output
Classes to change Text case
- .text-uppercase
- .text-lowercase
- .text-capitalize
Output
List Classes
- .list-inline
- .list-unstyled
Output
Post a Comment