Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial, we will be studying about how to download and setup the Bootstrap framework to your computers.
Bootstrap Download
You can download Bootstrap latest version from Bootstrap's official website. When you click on this link, you will see the screen as shown below -
When Bootstrap homepage opens, you will see two buttons -
- Download Bootstrap - Clicking this, you can download the precompiled and manified versions of Bootstrap CSS, JavaScript, and fonts. Original source code files or documentation are not included.
- Download Source - Clicking on this button, you can download the latest Bootstrap LESS and the JavaScript source code directly from GitHub.
READ: Bootstrap | Introduction
If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compilation of LESS files into CSS, Bootstrap officially supports only Recess, which is Twitter's CSS hinter based on less.js.
For better understanding and ease of use, we shall be using the precompiled version of Bootstrap throughout this tutorial series. As the files are compiled you don't have to bother every single time including separate files for individual functionality.
File Structure
Precompiled Bootstrap
Once the precompiled version of Bootstrap is downloaded, extract the zip file, and you are going to see the following file/directory structure as shown below -
As you can see from the above screenshot, there are compiled CSS and JS(bootstrap.*), as well as compiled and manified CSS and JS(bootstrap.min.*). Fonts from Glyphicons are included, as it is the optional Bootstrap theme.
Bootstrap Source Code
If you have downloaded the source code of Bootstrap then the file structure will look as shown below -
- The files under less/, Js/, and fonts/ are source code for Bootstrap CSS, JS and icon fonts.
- The dist/ folder includes everything listed in the precompiled download section above.
- docs-assets/, examples/, and all *.html files are documentation of Bootstrap.
HTML Template
A basic HTML template using Bootstrap is going to look like this -
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <!-- Bootstrap --> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src = "https://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "js/bootstrap.min.js"></script> </body> </html>
From the above code, you can see jquery.js, bootstrap.min.js, and bootstrap.min.css files that are added to make a normal HTML file to the Bootstrap template. Just make sure to include jQuery library before you include Bootstrap library.
Example
Now let's try an example making use of the above template -
<h1>Hello, world!</h1>
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about Bootstrap Grid System.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
