Convert existing WordPress Website to Bootstrap Responsive

We are awesome at our services and 97% of our customers continue to choose or refer us. We have created
many websites and some of them are listed below

36 +
World widecustomers
7 +
Skilled Experts
6 +
Years Of Experience
87 +
Successfully projects

In this tutorial we will brief you how to Convert your WordPress Website To Mobile Friendly using Bootstrap.

Review your existing site in various devices to see how much repair does it need to become responsive. Alternatively you can resize the website in your browser on a desktop to check how it responds and resizes itself. If the website simply gets cuts of the edges and you are unable to see the content then your website is most probably not responsive.

Next is download the Twitter Bootstrap Framework from the official website http://getbootstrap.com/ You will get some font files, css of bootstrap bootstrap.css and carousel.css for styling a bootstrap responsive slider.

Bootstrap template consists of columns by which you can create partitions in your website. i.e for sidebar, middle content, right content etc.

The default contains 12 columns which is customizable. Say if your website is with a right sidebar column you can assign the left side 8 columns and right side 4 columns or left 9 columns and right 3 columns as per your spacing requirements.

Doing this automatically lets you take advantage of responsive nature of the website. Sort all your content of existing website in columns and blocks to move to bootstrap.

Bootstrap also has a built in carousel which you can use to migrate your slider content into it.

Syntax of a Carousel Bootstrap is as follows

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="col-sm-9 col-md-9 col-lg-9 slider_img">
<div class="carousel-inner">
<div class="item active"><img src="images/slider1.jpg" alt="" /></div>
<div class="item"><img src="images/slider2.jpg" alt="" /></div>
<div class="item"><img src="images/slider3.jpg" alt="" /></div>
</div>
</div>
</div>

If your website contains table structure you will need to convert it to div structure as table is non good for responsive websites though there are a few tweaks to adjust it but it is not recommended. Also table is not good for SEO of your website.
Following is the menu structure of Bootstap:

<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Services</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>