We will assume that you are already familiar with the fundamentals of HTML and CSS before beginning this course. If you're unfamiliar with these topics, we recommend reading our HTML and CSS tutorials.
Download Bootstrap:
https://getbootstrap.com/ is where you can get the most recent version of Bootstrap. When you click this link, you'll be taken to the screen shown below.
Below you can see two buttons:
- Download Bootstrap- You may download pre compiled and minified versions of Bootstrap CSS, JavaScript, and fonts by clicking this. There is no documentation or source code files included.
- Download Source: You may grab the current Bootstrap LESS and JavaScript source code directly from GitHub by clicking this.
Throughout the lesson, we will utilise a precompiled version of Bootstrap for better comprehension and convenience of use. You don't have to worry about providing distinct files for individual functionality because the files have been compiled and minified. The most recent version (Bootstrap 3) was downloaded at the time of authoring this tutorial.
File Structure:
Precompiled Bootstrap: Once you've downloaded the built version of Bootstrap, unpack the ZIP file to reveal the following file/directory structure.
There are compiled CSS and JS (bootstrap.*) and compiled and minified CSS and JS (bootstrap.min.*), as you can see. The optional Bootstrap theme is supplied, as are Glyphicons fonts.
Bootstrap Source Code:
If you downloaded the Bootstrap source code, the following is the file structure:
- The source code for Bootstrap CSS, JS, and icon fonts may be found in the less/, js/, and fonts/ folders (respectively).
- Everything indicated in the precompiled download section above is in the dist/ folder.
- Bootstrap documentation may be found in the docs-assets/, examples/, and all *.html files.
HTML Template:
A basic HTML template using Bootstrap:
<!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>
The jquery.js, bootstrap.min.js, and bootstrap.min.css files are included in the Bootstrapped Template to create a regular HTM file. Simply ensure that you include the jQuery library before the Bootstrap library.
In the chapter Bootstrap CSS Overview, further information on each of the parts in the preceding piece of code will be provided.
