[vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″][text_output]This is second tutorial of Bootstrap 3, in this bootstrap tutorial we will learn:
- How to install Bootstrap using CDN & link required files
- How to install Bootstrap manually & link required files
- Advantages & Disadvantages of Bootstrap CDN
- Bootstrap Helping Material
Don’t know what bootstrap is? Goto tutorial 1[/text_output][vc_row_inner padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=”margin-bottom: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_widget_sidebar sidebar_id=”ups-sidebar-boostrap3″][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][/vc_column_inner][/vc_row_inner][text_output]
Table of Contents
Linking files in Bootstrap
In Bootstrap tutorial 1, we linked Bootsrap css file to the index.html but for Bootstrap to work properly, we need to link few more files to index.html. This can be done in two ways:
- Using CDN
- Link to required files on CDN and use them in your project without downloading them.
- Manually
- Download all required files to project folder and change them the way you like. (Already done in tutorial 1)
Method 1: Installing Bootstrap using CDN
To install bootstrap using CDN(Content Delivery Network), you need to add following code in the index.html file. It simply goes to specific links and grabs the required code files for bootstrap to work properly. Doing so, you get the requirements fulfilled without downloading the required files.
Apart from adding CDN links, I have also added style.css on line#13 and script.js on line#32 files in css and js folders respectively for adding custom code.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Linking Bootstrap core css file from maxcdn --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Linking Bootstrap optional theme file from maxcdn --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <!-- Linking another stylesheet to override bootstrap styles (optional) --> <link rel="stylesheet" href="css/style.css"/> <title>Tutorial 2: Bootstrap 3</title> </head> <body> <!-- FIRST: Linking jQuery (required js library to run bootstrap properly) --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- SECOND: Linking Bootstrap.min.js (Minified Bootstrap Core JS file) --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Linking Html5shiv.min.js (Adds HTML5 support for older browsers)--> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <!-- Linking Respond.min.js (Enables responsive CSS3 compatibility for older browsers) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script> <!-- Linking script.js (for adding custom javascript code) --> <script src="js/script.js"></script> </body> </html>
[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=””][vc_column_inner fade_animation_offset=”45px” width=”2/3″][text_output]
Line-by-Line Code Explanation
7: including bootstrap’s core css file
10: including boostrap’s optional theme
13: including a stylesheet for customising bootstrap
20: including jquery so that boostrap javascript can function
23: including boostrap core js file
26: including html5shiv to support html5 in older browsers
29: including respond.js to support CSS3 in older browsers
32: including a script for customising bootstrap[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/3″][lightbox selector=”.x-img-link” opacity=”0.875″ prev_scale=”0.75″ prev_opacity=”0.75″ next_scale=”0.75″ next_opacity=”0.75″ orientation=”horizontal” thumbnails=”true”][text_output]
Folder Hierarchy
After adding the above code, your project hierarchy should look like as shown in Fig 2.1
[/text_output][image type=”thumbnail” float=”left” link=”true” info=”tooltip” info_place=”top” info_trigger=”hover” src=”8655″ alt=”Bootstrap CDN” href=”http://blog.hfarazm.com/wp-content/uploads/2015/10/bootstrap-CDN.jpg” title=”Bootstrap CDN” info_content=”Folder Hierarchy” lightbox_caption=”Folder Hierarchy” id=”” class=”x-img-link” style=”” lightbox_thumb=”8655″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”Advantages-Bootstrap-CDN” class=”” style=””][text_output]
Advantages of CDN
- Browsers can download a limited number of assets per website at a time. Since the CDN is on another site, it’s not included in that limit. So browser does not download the same file again.
- There’s a good chance that your ISP has already cached files from popular CDNs.
- Good for free web hosting sites like Weebly that don’t let you create script or assets.
- If your site gets low traffic and uses an inexpensive hosting service, a CDN is all win.
[/text_output][text_output]
Disadvantages of CDN
- If the CDN goes out of business, you have to re-host your own website.
- If the CDN performance is bad, it reflects badly on your website.
- It doesn’t work offline, so you can’t develop without a net connection.
- If your site serves complicated web pages with many assets on one page, the performance may outweigh the slight risk of the CDN going down.
[/text_output][/vc_column][/vc_row][vc_row no_margin=”true” padding_top=”0px” padding_bottom=”0px” bg_video=”” class=”” style=””][vc_column fade_animation_offset=”45px” width=”1/1″ id=”installing-Bootstrap-manually” class=”” style=””][text_output]
Method 2: Installing Bootstrap manually
In tutorial 1, we also created an index.html file in the same ‘dist‘ folder where we have CSS, JS and FONTS folders. Open index.html and paste following code in it:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Linking Bootstrap.min.css (Minified Bootstrap Core CSS file) -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<!-- Linking Bootstrap optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<!-- Linking another stylesheet to override bootstrap styles (optional) -->
<link rel="stylesheet" href="css/style.css"/>
<title>Tutorial 2: Bootstrap 3</title>
</head>
<body>
<!-- FIRST: Linking jQuery (required js library to run bootstrap properly) -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- SECOND: Linking Bootstrap.min.js (Minified Bootstrap Core JS file) -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Linking Html5shiv.min.js (Adds HTML5 support for older browsers)-->
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<!-- Linking Respond.min.js (Enables responsive CSS3 compatibility for older browsers) -->
<script type="text/javascript" src="js/respond.min.js"></script>
<!-- Linking script.js (for adding custom javascript code) -->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Note: Method 1 and Method 2 are used in different ways but solution of both are exactly the same.[/text_output][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=”margin: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”2/3″][text_output]
Line-by-Line Code Explanation
7: including bootstrap’s core css file
10: including boostrap’s optional theme
13: including a stylesheet for customising bootstrap (add yourself)
20: including jquery so that boostrap javascript can function properly. Download jquery
23: including boostrap core js file from js folder
26: including html5shiv to support html5 in older browsers. Download html5shiv.js
29: including respond.js to support CSS3 in older browsers. Download respond.js
32: including a script for customising bootstrap (add yourself)[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/3″][text_output]Folder hierarchy (Fig 2.2)[/text_output][image info=”popover” info_place=”top” info_trigger=”hover” src=”8680″ alt=”Bootstrap installation” href=”http://blog.hfarazm.com/wp-content/uploads/2015/10/Manual-bootstrap-installation.jpg” title=”Bootstrap installation” info_content=”” lightbox_caption=”” id=”” class=”x-img-link” style=”” lightbox_thumb=”8680″][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” marginless_columns=”true” bg_video=”” class=”” style=”margin: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”2/3″][text_output]
How to check if files are linked correctly?
- Open index.html in browser (lets say chrome).
- Right click in white area in your browser and click on inspect element or press (Ctrl+I)
- Go to console and if there are no errors, you have won the trophy. Fig 2.3
[/text_output][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/3″][image src=”8940″ alt=”” href=”” title=”” info_content=”” lightbox_caption=”” id=”” class=”” style=””][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” border=”none” marginless_columns=”true” bg_video=”” class=”” style=”margin: 0px; padding: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”1/1″][text_output]
Conclusion
- Installing bootstrap using CDN is way easier but you need to have good internet connectivity, CDN won’t work without the internet.
- It is very important to link jquery, html5shiv and respond.js files in correct order as linked above.
Next tutorial is about basics of bootstrap in which we will learn about grid system, containers, rows, and breakpoints.[/text_output][/vc_column_inner][/vc_row_inner][vc_row_inner no_margin=”true” padding_top=”0px” padding_bottom=”0px” border=”none” marginless_columns=”true” bg_video=”” class=”” style=”margin: 0px; padding: 0px;”][vc_column_inner fade_animation_offset=”45px” width=”1/1″ id=”Project-Files” class=”” style=””][vc_btn title=”Download Project Files” style=”flat” shape=”square” color=”green” align=”center” css_animation=”none” link=”url:https%3A%2F%2Fgithub.com%2Fhfarazm%2FBootstrap-3-Tutorials-Hfarazm.com|title:Download%20Project%20Files|target:%20_blank|”][text_output]
[/text_output][text_output]
[WpProQuiz 3]
[/text_output][/vc_column_inner][/vc_row_inner][vc_row_inner padding_top=”0px” padding_bottom=”0px”][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”<< Previous Bootstrap Tutorial” style=”flat” shape=”square” color=”green” align=”center” link=”url:http%3A%2F%2Fblog.hfarazm.com%2Fgetting-started-bootstrap-tutorial%2F|title:Getting%20Started%20Bootstrap%20Tutorial||”][/vc_column_inner][vc_column_inner fade_animation_offset=”45px” width=”1/2″][vc_btn title=”Next Tutorial on 17th Jan >>” style=”flat” shape=”square” align=”center” link=”url:%23|title:Next%20Tutorial%20will%20be%20published%20on%2017th%20Jan||”][/vc_column_inner][/vc_row_inner][share title=”Share this Post” facebook=”true” twitter=”true” google_plus=”true” linkedin=”true” reddit=”true” email=”true” id=”” class=”” style=””][/vc_column][/vc_row]
