What is Bootstrap?

Bootstrap saves time. As a web developer, you must learn Bootstrap to create modern mobile friendly websites at competently less time. Think about Bootstrap as a ready made css & javascript package that allows you to add features to your website with simple html code.

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.

In the last few years, the web design process has shifted from desktop to mobile-friendly platforms. Bootstrap provides mobile first front end framework using HTML, CSS and Javascript.

How to use Bootstrap?

First you need to download Bootstrap to your theme directory. The zipped Bootstrap file comes with 3 folders

- CSS

- Fonts

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.

Click here to download Bootstrap

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

Use wp_enqueue_style and wp_enqueue_script in your function.php file to load Bootstrap javascript and stylesheet onto your website. Just like your cascading stylesheet (css), the last enqueue function will override the existing enqueue function. Therefore your custom script and stylesheet should always be the last one on the list. Any custom code you write on your custom stylesheet and script will override the pre existing javascript and stylesheet from other plugins and programs.

Your final list of enqueue function should be on the following order –

For stylesheet:

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’ );

For script:

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 –>

<!– Optional theme –>

<!– Latest compiled and minified JavaScript –>

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>

</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 Templates:

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.

Bootstrap Competitors

CSS & Javascript libraries for developing responsive front-end framework that are similar to Bootstrap are

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.

https://bootsnipp.com/

https://bootdey.com/bootstrap-snippets

http://www.bootbundle.com/

Responsive Website