What is Bootstrap?
For example; if you write the following code into your html file
<button class="btn btn-primary">Click here</button>
You will get the following result
It will create a nice blue button with click here text on it thus greatly reducing your time to write css code for creating similar buttons. In the above example CSS classes like btn & btn-info are precoded on Bootstrap css file.
How to use Bootstrap?
First you need to download Bootstrap to your theme directory. The zipped Bootstrap file comes with 3 folders
You can always override Bootstrap values in your custom script (.js) and stylesheet(.css). So the best recommendation to lower the file size is to use only the minified version of the downloaded files.
For example, stylesheets inside CSS folder contain 2 variations of same file bootstrap.css and bootstrap.min.css. If you check the file size, you will find that boostrap.min.css is smaller than bootstrap.css. Use bootstrap.min.css to lower your file size and speed up your loading time. This rule applies to .js files inside JS folder as well.
Loading Bootstrap css, fonts and js files
There are 2 ways to load Bootstrap files to make it work on your website. One way to achieve this is using your functions.php file located inside your theme folder and another way using Bootstrap CDN. Let me explain you both process in more details.
- Enqueque boostrap in function.php
Your final list of enqueue function should be on the following order –
wp_enqueue_style( 'boostrap', get_template_directory_uri() . ‘/css/bootstrap.min.css', array(), '3.3.7', 'all' );
wp_enqueue_style( 'customstyle', get_template_directory_uri() . '/style.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'bootstrapscript', get_template_directory_uri() . ‘/js/bootstrap.min.js', array('jquery'), '3.3.7', true );
wp_register_script( 'customjs', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true );
- Bootstrap CDN
Copy and paste the following into your php files, such as front-page.php, page.php, index.php (or any other php file) wherever you want to activate the Bootstrap.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap Grid System:
The most powerful feature of Bootstrap is its grid system. With just 3 elements and their respective classes as listed below, you can create a fully responsive layout and wrap your content within it. This will save you a lot of time from writing various media queries for different screens sizes.
- Container (css class “container” & “container-fluid”)
- Row (css class “row”)
- Columns (css class “col-xs-3”, “col-sm-4”, “col-md-8”, “col-lg-6” etc)
For example lets say you want 4 horizontal buttons per row on small, medium and large screen (tablets, laptops & desktop), but you want only 1 horizontal button per row on extra small screen like mobile phone. The codes require to achieve such layout is as follow,
<div class=“col-sm-3”><button class=“btn”>Your button 1</button></div>
<div class=“col-sm-3”><button class=“btn”>Your button 2</button></div>
<div class=“col-sm-3”><button class=“btn”>Your button 3</button></div>
<div class=“col-sm-3”><button class=“btn”>Your button 4</button></div>
So depending upon your design requirements you can code any layout using simple Bootstrap grids. Click to learn more about the Bootstrap grids.
The frequently used html (Hypertext Markup Language) elements that can be quickly styled using Bootstrap are
- Navigation (nav)
- Typography (h1 – h6, p, u, small, blockquotes, address etc )
- Tables (table)
- Buttons (btn, btn-default, btn-info, btn-primary etc)
- Responsive images (img-responsive)
- and many more
Bootstraps plugins allows various functions like modal, popover, carousel, dropdown, transitions, alert, affix, scrollspy etc. You can download the Bootstrap.js or the minified version bootstrap.min.js to activate these functions.
Bootstrap offers many free and premium templates. These modern and professional handpicked themes are the quickest way to customize and brand your business website. Once you choose the right theme, you can upload it into your live server and start customizing colors and content. If you do not have enough expertise to customize the theme, you can hire junior developers to complete the job at extremely affordable price.
Click here to find the list of Bootstrap free and premium templates.
Forum, snippets & support group
You can notice the popularity of Bootstrap using the Google trend graph. Click here to see the graph and how the interest over time has skyrocketed over the past few years.
Due to the popularity, Bootstrap has a large support group of developers from around the world. You will find plenty of snippets to include into your next project by browsing the following links.