Designing a Responsive Website Using Twitter Bootstrap
Sarah Parker 12th Jul 2020
Twitter Bootstrap is an HTML/JavaScript/CSS framework that has been increasingly becoming popular these days as a dynamic front-end development tool. It provides an awesome way of building a flawless website. The framework is built using state-of-the-art HTML5 and CSS3 coding stands and features a great deal of awesome widgets, attractive typography, and the above all, it provides support for the smooth functioning of responsive design that looks graceful running on a wide range of devices, irrespective of the screen size, platform and orientation.
As a sleek and intuitive framework, it gives webmasters ability for developing responsive, and mobile-first online projects. It makes the process of UI design simpler and faster. It's user-friendly nature makes it an ideal choice for both seasoned and newbie developers. And, its wide range of features and tools effectively meet the needs of the devices of all shapes and sizes. And, it's great for anyone who appreciates speed and user convenience.
Twitter Bootstrap is mainly related with designing responsive websites. The framework plays a significant role in creating a design which easily adapts to the specification the device being used to view a website. If you are not familiar with the concept of responsive design, then don't worry because by the time you finish reading the post you'll gain an in-depth understanding of the concept.
What is a Responsive Design?
Responsive design is a designing concept aimed at building a website that is able to adapt to the context of the device in which it is being viewed on- be it a Smartphone, desktop or any other mobile device. In simple words, a responsive website has the ability to adapt to multiple screen sizes by resizing and re-designing its related elements.
The main idea of responsive design is basically relied on the CSS3 media queries that target specific resolution and size. Although, media queries are around for quite a while, but they were mainly used for targeting print styles only. The introduction of CSS3 bought a significant turn in the way they were used and thus actually proves to be useful.
There are two factors one should consider while trying their hands with responsive design:
1. Work and Work
While working with responsive design, designers often get struck using CSS code, JavaScript, along with a creative thinking which comes along with. They need to think about UI patterns, its scaling abilities, and how it is going to interact with the users and many more.
2. More Testing
This is where the process of creating a responsive design without using Bootstrap lets down the developer. The single most way of testing the design is by using it on the device, while simultaneously writing 5 lines of CSS code and then testing it again on an iPad, loading the website, evaluating the landscape and blah! blah! blah!
Hope, you getting my point.
Here, comes the use of Bootstrap to its existence. The framework gets you rid of all the tiring processes and helps you design a high-end responsive website with minimal effort.
Why Twitter Bootstrap is Useful for Responsive Website
- Provides predefined user interface components including CSS buttons, navigation bars and responsive images.
- Bootstrap's JavaScript library for creating tabs, collapsible sections, alerts etc., without writing even a single line of code.
- Customization ability to make your site look and work exactly how you want it to be.
Getting Started with Bootstrap
Before you actually take a dig inside Bootstrap, let's prepare a basic set up:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Designing a Responsive Website Using Twitter Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BODY PAGE CONTENT HERE -->
<!-- Bootstrap javascripts -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>It's a basic layout wherein we have included all the necessary meta tags along with two CSS files. We have also included jQuery and a minimized bootstrap core.
2. Header Navigation Section
This menu is designed at the top of the page. Here is how the markup is prepared:
<!-- Static navigation section -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site name here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>The top navigation menu mainly consists of a hidden button, navbar-brand element and a drop-down menu based on UL-UI.
3. Grid System
In Bootstrap, Grid Systems are group of rows and columns, that are used for manage the page layout. Each columns group contains within row.
<!-- Grid System -->
<div class="container">
<!-- Three columns of text -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>ABCDEFGHIJKLMNOP.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h2>Heading</h2>
<p>QRSTUVWXYZABCDEFGHI.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<h2>Heading</h2>
<p>JKLMNOPQRSTUVWXYZ.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row →4. Bootstrap Slider
The slider built with Bootstrap Carousel. You can also add captions with each slide. Here is the markup for that:
<!-- Carousel -->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/slide1.jpg" alt="First slide">
</div>
<div class="item">
<img src="images/slide2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="images/slide3.jpg" alt="Third slide">
</div>
<div class="item">
<img src="images/slide4.jpg" alt="Fourth slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->5. Bootstrap Modal
Modal Box is a responsive popup box in which you can display any types of information like text, images, video, etc. And you can also take an action through user.
<!-- Bootstrap modal box -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<p>Put modal content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->6. Footer
This how we prepare markup for footer:
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 Company, Inc. <a href="#">link 1</a> <a href="#">link 2</a></p>
</footer>7. CSS
Although, whatever the elements or components we have designed so far don't require styling because most of their have been predefined in the Bootstrap's style sheet. It is only slider which needs CSS styling individually. Here is how we can go about it.
.carousel {
height: 420px;
margin-bottom: 40px;
}Conclusion
The purpose of this article is to provide you a better understanding of the usage and implementation of the Bootstrap for developing a responsive website. Hope, you have found the article useful and will bookmark it for the future reference.
