Wednesday, 27 July 2016

Bootstrap Basic Classes

Container class :

Use .container for a responsive fixed width container.

Css for container in ---   .container{width:1170px;} 

<div class="container">  ...</div>


Use .container-fluid for a full width container, spanning the entire width of your viewport.

Css for container-fluid in ---  .container-fluid{width:100%;}

<div class="container-fluid">  ...</div>


Basic Structure Code :

How to Use Bootstrap :

STEP 1: Download Bootstrap.zip file 


STEP 2: Link Bootstrap Css    in <head></head>  tag 

<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"  ></script >
<script src="js/bootstrap.min.js"></script>



  1. <!DOCTYPE html><html lang="en">
  2. <!---Start head section --->
  3. <head> 
  4.  <title>Bootstrap Case</title> 
  5.  <meta charset="utf-8"> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  9. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  10. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
  11. </head>
  12. <!---End head section --->
  13. <body>  <!---Start Bootstrap Class here section --->

  15. <div class="container"> <!---Container class use here --->

  17. <div class="row">  <!--- Start 1st row class use here --->
  18. <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12   "   style=" min-height: 150px !important;    background: #31961f !important">
  19. <h2 align="center" >Col-3</h2>
  20. </div>
  21. <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"  style="min-height: 150px !important;    background: red !important">
  22. <h2 align="center" >Col-9</h2>
  23. </div>
  24. </div>  <!--- End 1st row class use here --->

  26. <div class="row">  <!--- Start 2st row class use here --->
  27. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"  style=" min-height: 400px !important;    background: #ddd !important">
  28. <h2 align="center" >Col-12</h2>
  29. </div>
  30. </div> <!--- End  2st row class use here --->

  32. <div class="row">  <!--- Start 3st row class use here --->
  33. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important">
  34. <h2 align="center" >Col-2</h2>
  35. </div>

  37. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important">
  38. <h2 align="center" >Col-2</h2></div>

  40. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important">
  41. <h2 align="center" >Col-2</h2>
  42. </div>

  44. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important">
  45. <h2 align="center" >Col-2</h2>
  46. </div>

  48. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #000 !important"><h2 align="center" >Col-2</h2></div>


  51. <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12" style=" min-height: 150px !important;    background: #31961f !important"><h2 align="center" >Col-2</h2></div>

  53. </div> <!--- End  3st row class use here --->

  55. </div> <!--- End Container class here  --->
  56. <!---End Bootstrap Class here section --->
  57. </body>
  58. </html>


Output :


Posted by at

No comments:

Post a Comment

Thanks For Message . Keep in touch

Subscribe to: Post Comments (Atom)