Header Responsive Ads

What is Bootstrap (CSS Framework)

Bootstrap grid system
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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

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.
<!DOCTYPE html>
<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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.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 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.

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

We can create any numbers of columns up to 12 of unequal width as below. Sum of all columns should be 12 as below.

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
    <div class="col-md-1"></div>
    <div class="col-md-3"></div>
</div>

Bootstrap Text Classes

Following are bootstrap default font-sizes

<p>       14px
<h1>     36px
<h2>     30px
<h3>     24px
<h4>     18px
<h5>     14px
<h6>     12x

bootstrap default heading

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

<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> was created in 1989.</p>
<br>
<p>Mark tag is used to <mark>Highlight</mark> the text</p>

<p>Html file contains <code>Head</codeand <code>Body</code> sections</p>

<p>Press <kbd>Ctrl + C</kbd> to copy text</p>

<pre>Bootstrap grid system
is used to  create responsive
    columns</pre>

Output

bootstrap popular classes


Text color classes

Following text color classes are provided by bootstrap

  • .text-muted
  • .text-success
  • .text-danger
  • .text-info
  • .text-primary
  • .text-warning

<p class="text-primary">Important text</p>
<p class="text-muted">Muted text</p>
<p class="text-info">Informative text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>

Output

text color bootstrap classes

Text background color classes

Bootstrap provide below classes to apply text background color

  • .bg-success
  • .bg-primary
  • .bg-info
  • .bg-danger
  • .bg-warning
<p class="bg-primary">Primary text</p>
<p class="bg-info">Informative text</p>
<p class="text-success">Success text</p>
<p class="bg-warning">Warning text</p>
<p class="bg-danger">Danger text</p>

Output
text background color bootstrap classes

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
text align bootstrap classes


Classes to change Text case

  • .text-uppercase
  • .text-lowercase
  • .text-capitalize
<p class="text-uppercase">Text Uppercased</p>
<p class="text-lowercase">Text Lowercased</p
<p class="text-capitalize">Text Capitalized</p>

Output

text case bootstrap classes

List Classes

  • .list-inline
  • .list-unstyled
<ul class="list-unstyled list-inline">
    <li>Javascript</li>
    <li>Bootstrap</li>
    <li>CSS</li>
    <li>Html</li>
</ul>

Output

list styled inline bootstrap class

Without list-inline class
<ul class="list-unstyled">
    <li>Javascript</li>
    <li>Bootstrap</li>
    <li>CSS</li>
    <li>Html</li>
</ul>

Output
list no style bootstrap class



Post a Comment

Previous Post Next Post

In Article Ads 1 Before Post

In Article Ads 2 After Post