CodesJava

Easy learning with example program codes

Bootstrap grid equal columns example


Bootstrap Grid System:

Bootstrap Grid System provides the facility to create advanced layouts using rows and columns. It allows up to 12 columns across the page i.e. number of columns can be up to 12 or fewer. We can use all 12 columns individually or can groups the columns together to create wider columns. Bootstrap Grid System is responsive and the columns will re-arrange automatically depending on the size of screen.

Bootstrap equal columns example:

<!DOCTYPE html>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
  <h2> Bootstrap equal columns example </h2>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">Gunjan</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">Rajeev</div>
    <div class="col-sm-3" style="background-color:lavender;">Vikram</div>
    <div class="col-sm-3" style="background-color: lavenderblush;">Sudhir</div>
  </div>
</div>
 
</body>
</html>
Try it:

Bootstrap Example on jsbin.com

Please follow and like us:

Bootstrap 3 Tutorial



Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki