Before knowing how to use the Bootstrap let me explain what is bootstrap, when and why we use it.
What is Bootstrap?
Bootstrap is a CSS and JavaScript library developed by two employees in the Twitter. It follows Mobile first approach to give the 100% responsiveness to the web applications in different screen resolutions. You just need to write code once and that it self adjust for different screen sizes. In 2014 Bootstrap is the Git Hub's top project according to Wikipedia.
Why and When we need to use Bootstrap?
Bootstrap is used for building responsive web applications with very less code. We just need to write code once and Bootstrap will take care about different screen sizes.
Installing Bootstrap into your code
Step 1. Open http://www.getbootstrap,com which is the official website for the Bootstrap
Step 2. Click on the Getting Started link in the Navigation Bar.
Step 3. Click on Download Bootstrap button on the left side. You will get download files in Zip file format.
Step 4. Extract the files you will see three folders named css, fonts, js.
Step 5. Open css folder and copy bootstrap.min.css file and bootstrap-theme.min.css file and paste in your working folder and include them in your files in the head section as a external style sheet.
Step 6. Open js folder and copy the bootstrap.min.js file and paste in your working directory and include this js file in your body section inside script tags. Other thing is you need to compulsory include jquery to use bootstrap js file functionalities. to do that.
Step 7. Open www.jquery.com and click on download button in the navigation bar.
Step 8. now scroll down a little bit you will find jquery latest series something like jquery 2x series. Now click on the latest file and download link with name production in it. extract the zip file and get the jquery-min.js and include in the working file before bootstrap js file.
Now your document look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tile of website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery-min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
That's it now you are ready to write the responsive code. Stay tuned to this blog I will explain some of the important things we use in bootstrap very soon.
If you have any doubts please comment below or you can mail us at ething4pc@gmail.com.
What is Bootstrap?
Bootstrap is a CSS and JavaScript library developed by two employees in the Twitter. It follows Mobile first approach to give the 100% responsiveness to the web applications in different screen resolutions. You just need to write code once and that it self adjust for different screen sizes. In 2014 Bootstrap is the Git Hub's top project according to Wikipedia.
Why and When we need to use Bootstrap?
Bootstrap is used for building responsive web applications with very less code. We just need to write code once and Bootstrap will take care about different screen sizes.
Installing Bootstrap into your code
Step 1. Open http://www.getbootstrap,com which is the official website for the Bootstrap
Step 2. Click on the Getting Started link in the Navigation Bar.
Step 3. Click on Download Bootstrap button on the left side. You will get download files in Zip file format.
Step 4. Extract the files you will see three folders named css, fonts, js.
Step 5. Open css folder and copy bootstrap.min.css file and bootstrap-theme.min.css file and paste in your working folder and include them in your files in the head section as a external style sheet.
Step 6. Open js folder and copy the bootstrap.min.js file and paste in your working directory and include this js file in your body section inside script tags. Other thing is you need to compulsory include jquery to use bootstrap js file functionalities. to do that.
Step 7. Open www.jquery.com and click on download button in the navigation bar.
Step 8. now scroll down a little bit you will find jquery latest series something like jquery 2x series. Now click on the latest file and download link with name production in it. extract the zip file and get the jquery-min.js and include in the working file before bootstrap js file.
Now your document look like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tile of website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery-min.js"></script>
</head>
<body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
That's it now you are ready to write the responsive code. Stay tuned to this blog I will explain some of the important things we use in bootstrap very soon.
If you have any doubts please comment below or you can mail us at ething4pc@gmail.com.
