Bootstrap Grid System and Basics Page Layouts

Bootstrap Grid System and Basics Page Layouts


Here with Bootstrap we no need to write CSS, here we need to use class names which bootstrap provided in minified CSS file

Bootstrap gives you default colors and properties, if you want to change properties you need to add a file style.css and you need to add your own properties like colors, borders, heights, etc., in your own way

Note:

in this grid system bootstrap already pre-defined width: property for all columns so you no need to use width

Page Layout - 1


full lenth container .container-fluid it will occupies entire screen

    
     <!DOCTYPE html>
     <html lang="en">
     <head>
      <title>Page Layout 1</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.2.0/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">
       <h1>full lenth container-fluid Bootstrap Page</h1>
       <p>your content here</p>
      </div>
     </body>
     </html>
    
   

Page Layout - 2


this container hold at center of the screen .container

    
     <!DOCTYPE html>
     <html lang="en">
     <head>
      <title>Page Layout 2</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.2.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     </head>
     <body>
      <div class="container">
       <h1>Center container Bootstrap Page</h1>
       <p>your content here</p>
      </div>
     </body>
     </html>
    
   
Post a Comment