Create a Simple Resposive Website Layout using bootstrap
Creating a responsive website using bootstrap is not a very complex thing. For that you just need bootstrap installed in your computer. You can download bootstrap from getbootstrap.com. After you have installed bootstrap you can start to create the website layout. Here are the steps to creating the website layout.
1. Create the project folder and name is as BootStrap_Project. But you can give any name if you like.
2. Inside that folder create 2 new folders and name them as css, js.
3. Copy and paste bootstrap.css file into the css folder
4. Copy and paste bootstrap.js file into the js folder
5. Then Download the Jquery file from here and add it to the js file.
6. And create another document and name it as index.html.
7. copy and paste this code inside that index.html document
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Blog Template</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/main.css"/> </head> <body> <div class="container"> <div class="row"> <div class="header"> <div class="col-xs-12"> <!-- header section --> <h2>Header</h2> <span>.col-xs-12</span> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="sideBar"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> <!-- sideBar section --> <h2>Side Bar</h2> <span>col-lg-3 col-md-3 col-sm-3 col-xs-12</span> </div> </div> <div class="blogContent"> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <!-- Blog Content Section --> <h2>Blog Content</h2> <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span> </div> </div> <div class="footer"> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> <!-- footer section --> <h2>Footer</h2> <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-2.1.4.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </body> </html> |
8. Then create another document inside the css folder and name it as main.css
9. Copy this code and paste it inside that document
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .container .row .header .col-xs-12 { background: none repeat scroll 0% 0% #41c2a8; border: 1px solid #367266; color: #ffffff; font-family: arial; text-align: center; } .container .row .sideBar .col-lg-3 { background: none repeat scroll 0% 0% #feb22e; border: 1px solid #a9710f; color: #ffffff; font-family: arial; height: 500px; text-align: center; } .container .row .blogContent .col-lg-9 { background: none repeat scroll 0% 0% #a7db72; border: 1px solid #5c8c58; color: #ffffff; font-family: arial; height: 500px; text-align: center; } .container .row .footer .col-lg-9 { background: none repeat scroll 0% 0% #4c74e8; border: 1px solid #111e55; color: #ffffff; font-family: arial; text-align: center; width: 100%; } |
10. save them all and run the index.html file from your browser. you'll get an output like this.
you can watch this website in mobile view too. it is a complete responsive website layout.
No comments