Category: Bootstrap

Bootstrap-Introduction

Introduction

Bootstrap is the most popular HTML, CSSm and JS framework for developing responsive, mobile first website.

Why Should we use bootstrap:

Bootstrap has a number of features that make it pleasent to use. Lets see some of them:

  1. Responsive : Bootstrap’s most popular feature is responsivenes, Which means website designed using bootstrap optimized to fit the size of the screen you are seeing.
  2. Mobile First: We already know main motive of bootstrap is responsiveness. Part of the code structure of bootstrap is mobile first opposit to desktop first. This means instead of using max-width in the media queries like you would for a site designed for desktop you use min-width.
  3. Browser Friendly: Bootstrap supports all the majot browsers available on the internet.
  4. Easy to use: The best part of bootstrap is you just need the basic knowledge of HTML and css to begin.

Grid System:

The key part of the bootstrap framework is it’s fluid Grid System. The grid system create page layouts by using multiple rows and columns in which you insert your content.

As the device your page is begin viewed on increases in size, the grid system use 12 colums layout system.

Bootstrap Examples:

Grid: uses the 12 pieceBootstrap grid, allowind you to easily adjust your site and letting all elements collapse in mobile mode.

Button: Bootstrap offers seven button styles (success, primary, default, basic, info, warning, danger) and four sizes with classes to bring those styles to fruition.

Icon: With more than 250 glyphs at your disposal in font format, icons need both a base class and and indivual icon class to perform.

Bootstrap Example Code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap use jquery for some functions to perform forexample carousel, dropdown menu etc.

That’s all about bootstrap stay tuned for upcoming tutorials.

HTML Intro and Basic Tags

  • What is HTML?

HTML stands for “Hyper Text Markup Language”.It is a language which is used for describing web pages using ordinary text.

HTML files always saved with its extension name (filename.html).

  • STRUCTURE OF HTML :

<!doctype html>

<html>

<head>

<title>

</title>

</head>

<body>

……..

</body>

</html>

The first line on the top,<!doctype html>,is a document type declaration and its lets the browser know which flavor of HTML you’re using (HTML5, in this case).

<html> is the opening tag that kicks things off and tells the browser that evevrthings between that and the </html> closing tag is an HTML document.The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

  • HEADING TAGS :

HTML has 6 levels of headings which use the elements <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

For example:

<!doctype html>

<html>

<head>

<title>heading examples</title>

</head>

<body>

<h1>This is a heading 1</h1>

<h2>This is a heading 2</h2>

<h3>This is a heading 3</h3>

<h4>This is a heading 4</h4>

<h5>This is a heading 5</h5>

<h6>This is a heading 6</h6>

</body>

</html>

RESULT :

This is a heading 1

This is a heading 2

This is a heading 3

 This is a heading 4

This is a heading 5

This is a heading 6

  • PARAGRAPH TAG:

The <p> tag offers a way to structure your text into different paragraphs.Each paragraph of text should go in between an opening <p> and a closing tag </p>.

For example:

<!doctype html>

<html>

<head>

<title>paragraph examples</title>

</head>

<body>

<p>First paragraph</p>

<p>Second paragraph</p>

</body>

</html>

RESULT :

First paragraph

Second paragraph

  • LINE BREAK TAG :

<br/> tag is used for break the line ,after using break tag anything we write,it starts from next line.

For example:

<!doctype html>

<html>

<head>

<title>paragraph examples</title>

</head>

<body>

<p>Hello <br/>

Thanks</p>

</body>

</html>

RESULT :

Hello

Thanks

  • HORIZONTAL LINES:

Horizontal lines are used to visually break-up sections of document .The <hr/> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example:

<!doctype html>

<html>

<head>

<title>horizontal line examples</title>

</head>

<body>

<p>This is a first para. <hr/></p>

<p>This is a second para.</p>

</body>

</html>

RESULT :

This is a first paragraph.

____________________

This is a second paragraph.

  • DELETE TAG:

Delete tag is used to delete the text .

For example :

<!doctype html>

<html>

<head>

<title>delete tag examples</title>

</head>

<body>

<del>Hello There</del>

</body>

</html>

RESULT :

Hello There

  • SUBSCRIPT AND SUPERSCRIPT:

A subscript or superscript is a character (number,letter or symbol) that is (respectively) set slightly below or above the normal line of type.

For example:

<!doctype html>

<html>

<head>

<title>subscript and superscript examples</title>

</head>

<body>

H<sub>2</sub>O <br/>

A<sup>2</sup>

</body>

</html>

RESULT :

H2O

A2

  • COMMENTS WRITING:

<!_ _ comments starts

_ _> comments closed.

  • STRONG,INS,EM TAG:

<strong>tag is used for highlighting the text.

<ins> tag is used for underlining the text.

<em>tag is used for italic.

For example:

<!doctype html>

<html>

<head>

<title>strong,ins,em tag examples</title>

</head>

<body>

<strong>Apple<br/></strong>

<ins>Mango<br/></ins>

<em>Orange</em>

</body>

</html>

RESULT :

Apple

Mango

Orange

 Example:

<!doctype html>

<html>

<head>

<title>text</title>

</head>

<body>

<p><strong style=”color:green;”>This</strong>

<strong style=”color:yellow;”>is</strong>

<strong style=”color:blue;”>my</strong>

<strong style=”color:red;”>page.</strong>

</p>

</body>

</html>

RESULT:

This is my page.

 

Content Credit : Ms. Swati Singh

Bootstrap 4 Multilevel Menu

Hi Everyone in this tutorial I am going to let you know how you can make Bootstrap 4 Multilevel Menu.

So, First of all lets start with the dropdown menu in bootstrap.

Here is a coding to create simle bootstrap menus.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="text-center"><h2>Bootstrap 4 Multilevel Dropdown Menu</h2></div>

<div id="menu_area" class="menu-area">
<div class="container">
<div class="row">
<nav class="navbar navbar-light navbar-expand-lg mainmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li><a href="#">Service</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>

After this you will the output as following image:

Bootstrap 4 Multilevel Menu
Bootstrap 4 Multilevel Menu

Now here is some css coding to make these menu looks better:

The CSS

.menu-area{background: #d61a5e}
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{color:#fff;font-size:16px;text-transform:capitalize;padding:16px 15px;font-family:'Roboto',sans-serif;display: block !important;}
.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: #fff;background: #4CAF50;outline: 0;}
/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{background: #4CAF50;}
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #4CAF50;}
.mainmenu .collapse ul ul ul > li:hover > a{background: #4CAF50;}

.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#1565C0;}
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#1E88E5}
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#64B5F6}

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}

In the above code you can see I have used different screen size to make our menu compatible on all devices.

After adding css our output will look as follow:

Bootstrap 4 Multilevel Menu
Bootstrap 4 Multilevel Menu

Let’s add some java script to make our menu multilevel:

The JS

$(function($){
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');

$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});

return false;
});
});

BS4

This is the last step we have performed output for this code will be as follow :

If you want the complete code once then here is the code for Bootstrap 4 Multilevel Menu:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
.menu-area{background: #d61a5e}
.dropdown-menu{padding:0;margin:0;border:0 solid transition!important;border:0 solid rgba(0,0,0,.15);border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a , .navbar-expand-lg .navbar-nav .nav-link{color:#fff;font-size:16px;text-transform:capitalize;padding:16px 15px;font-family:'Roboto',sans-serif;display: block !important;}
.mainmenu .active a,.mainmenu .active a:focus,.mainmenu .active a:hover,.mainmenu li a:hover,.mainmenu li a:focus ,.navbar-default .navbar-nav>.show>a, .navbar-default .navbar-nav>.show>a:focus, .navbar-default .navbar-nav>.show>a:hover{color: #fff;background: #4CAF50;outline: 0;}
/*==========Sub Menu=v==========*/
.mainmenu .collapse ul > li:hover > a{background: #4CAF50;}
.mainmenu .collapse ul ul > li:hover > a, .navbar-default .navbar-nav .show .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .show .dropdown-menu > li > a:hover{background: #4CAF50;}
.mainmenu .collapse ul ul ul > li:hover > a{background: #4CAF50;}

.mainmenu .collapse ul ul, .mainmenu .collapse ul ul.dropdown-menu{background:#1565C0;}
.mainmenu .collapse ul ul ul, .mainmenu .collapse ul ul ul.dropdown-menu{background:#1E88E5}
.mainmenu .collapse ul ul ul ul, .mainmenu .collapse ul ul ul ul.dropdown-menu{background:#64B5F6}

/******************************Drop-down menu work on hover**********************************/
.mainmenu{background: none;border: 0 solid;margin: 0;padding: 0;min-height:20px;width: 100%;}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover> ul{display:block}
.mainmenu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul li{position:relative}
.mainmenu .collapse ul ul li:hover> ul{display:block}
.mainmenu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.mainmenu .collapse ul ul ul li{position:relative}
.mainmenu .collapse ul ul ul li:hover ul{display:block}
.mainmenu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 35px}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a{padding:16px 15px 16px 45px}
}
</style>
<script>
$(function($){
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');

$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});

return false;
});
});
</script>

<div id="menu_area" class="menu-area">
<div class="container">
<div class="row">
<nav class="navbar navbar-light navbar-expand-lg mainmenu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown3</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Service</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>

I hope you guys enjoy this tutorial stay tuned for my upcoming posts.

Bootstrap grid system

Bootstrap provides us a 12-column layout , which is called Bootstrap grid system. It divides , a screen into twelve equal ( columns ) parts .

What is Bootstrap ?

Bootstrap is an front-end framework for HTML , CSS, Java Script for designing websites and web applications . Here is the important points that makes bootstrap a first choice front-end web-development :

  • It was originally known as , Twitter Blueprint . It was developed by Mark Otto and Jocob Thornton in August , 2011 .
  • The current version of bootstrap is Bootstrap 4.
  • It is used for responsive, mobile-first web designing.
  • The term responsive means , the layout of website varies according to device. For example , When we open the website on laptop , it may have four columns horizontally ( left to right ). And same website may have single column  ( next columns automatically adjusts top-bottom ) when we opens it on mobile.
  • There are various

What is framework ?

We have discuss earlier, bootstrap is a front-end framework . But now question arises , what is framework . In simple words , we can say that framework is a system which provides us some predefined functionalities .

Let’s take an real life example , Suppose you want a house , and you buy a ready-made house. You just have to do a little change there according to you . There is no need to pay extra efforts in making it from starting . This is the same as framework .In framework , there are some predefined classes and functions , we need not to create them . We just use them whenever we want .

Bootstrap Grid System

Bootstrap  provides us a 12-column layout , which is called Bootstrap grid system. It divides , a screen into twelve equal ( columns ) parts . The screen size may be anything like as mobile , laptop, desktop etc , it divides screen into equal twelve parts . These columns automatically adjusts , when screen size changed . Same website opened on large screen displays different from same website on small screen.

We can say that bootstrap’s grid system is full responsive , and columns re-arranges according to the screen size .

Bootstrap screen sizes and classes

Bootstrap provides responsive web-designing for different screen sizes . There are different classes for different screen sizes . It divides screens into following parts :

Sr. No.

Class Name

Screen Size

Example

1xsless than 768px

screen size >768px

mobile phones
2smgreater than or equal to 768px

screen size >=  768px

tablets , large mobile phones
3mdgreater than or equal to 992px

screen size >= 992px

small laptops etc.
4lggreater than or equal to 1200px

screen size >= 1200px

laptops , desktops etc.

Bootstrap Grid Structure

Here is the basic structure of grid system with equal columns :

Example : Equal columns

<!DOCTYPE html>
<html>
  <head>
    <title>BS Grid System</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container text-center">
      <div class="row">
        <div class="col-md-12 bg-danger" style='height:100px;'>col-md-12
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 bg-info" style='height:100px;'>col-md-6
        </div>
        <div class="col-md-6 bg-warning" style='height:100px;'>col-md-6
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 bg-primary" style='height:100px;'>col-md-4
        </div>
        <div class="col-md-4 bg-danger" style='height:100px;'>col-md-4
        </div>
        <div class="col-md-4 bg-primary" style='height:100px;'>col-md-4
        </div>
      </div>
      <div class="row">
        <div class="col-md-3 bg-success" style='height:100px;'>col-md-3
        </div>
        <div class="col-md-3 bg-info" style='height:100px;'>col-md-3
        </div>
        <div class="col-md-3 bg-success" style='height:100px;'>col-md-3
        </div>
        <div class="col-md-3 bg-warning" style='height:100px;'>col-md-3
        </div>
      </div>
      <div class="row">
        <div class="col-md-2" style='height:100px; background-color:#c4a89d;'>col-md-2
        </div>
        <div class="col-md-2" style='height:100px; background-color:#6de082;'>col-md-2
        </div>
        <div class="col-md-2" style='height:100px; background-color:#65b9ed;'>col-md-2
        </div>
        <div class="col-md-2" style='height:100px; background-color:#e88dad;'>col-md-2
        </div>
        <div class="col-md-2" style='height:100px; background-color:#f9b3f2;'>col-md-2
        </div>
        <div class="col-md-2" style='height:100px; background-color:#928de8;'>col-md-2
        </div>
      </div>
      <div class="row">
        <div class="col-md-1" style='height:100px; background-color:#e8a4a4;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#68b54a;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#cce01a;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#1dd62a;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#ea77db;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#2bf263;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#ed558f;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#67eaea;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#e079b5;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#e88dad;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#2345dd;'>col-md-1
        </div>
        <div class="col-md-1" style='height:100px; background-color:#ea4f6c;'>col-md-1
        </div>
      </div>
    </div>
  </body>
</html>

Output

grid system
grid system

Example : Un-equal columns

<!DOCTYPE html>
<html>
  <head>
    <title>BS Grid system</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container text-center">
      <div class="row">
        <div class="col-md-4 bg-success" style="height:100px">
          col-md-4
        </div>
        <div class="col-md-8 bg-danger" style="height:100px">
          col-md-8
        </div>
        <div class="col-md-10 bg-primary" style="height:100px">
          col-md-10
        </div>
        <div class="col-md-2 bg-warning" style="height:100px">
          col-md-2
        </div>
      </div>
    </div>
  </body>
</html>

Output

grid system
grid system

Explanation

  • As you can see in the example, we are using md class, for medium screen.
  • Try to minimize the screen , when the screen size >  768px the column will adjust one by one.
  • In example 2, you can see we have define row one time. The screen takes only size of 12 column . When column exceed than 12 , it automatically adjusts in next line.

So , it is all about today’s article , Hope you guys enjoyed the article . Thanks.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.