Building Responsive Websites with Bootstrap 3
The web design and development world has come a long way in the last decade. In 2013, users expect websites to be responsive, providing seamless experiences across a range of devices—desktops, tablets, and smartphones. With mobile web traffic continuing to rise, building responsive websites is no longer a luxury but a necessity. Luckily for developers, frameworks like Bootstrap make creating responsive websites much simpler and faster. In August 2013, Twitter released Bootstrap 3, and it came with a strong focus on mobile-first design. This release revolutionized front-end development by simplifying the process of creating modern, responsive web designs.
In this post, I’ll walk you through the key features of Bootstrap 3 and how you can use it to build fully responsive websites efficiently.
What is Bootstrap?
Before diving into Bootstrap 3, let’s briefly revisit what Bootstrap is. Bootstrap is an open-source, front-end framework originally created by developers at Twitter in 2011. It provides a set of CSS, JavaScript, and HTML components that help developers build responsive, mobile-first web pages quickly and consistently. By including pre-built design patterns, grid systems, and UI components, Bootstrap enables developers to prototype and build feature-rich websites without writing everything from scratch.
Bootstrap 3, the latest version, focuses primarily on mobile-first development, encouraging developers to design for small screens first and scale up for larger screens.
What’s New in Bootstrap 3?
With the release of Bootstrap 3, several changes and improvements were made, making it more powerful and versatile than its predecessor. Here are some of the key updates:
- Mobile-First Approach: Bootstrap 3 emphasizes mobile-first design, which means layouts are optimized for mobile devices first and then enhanced for larger devices. This ensures that websites are fully responsive, adapting to different screen sizes effortlessly.
- Fluid Grid System: The grid system has been revamped to be more flexible and responsive. Bootstrap 3 uses a 12-column grid that adjusts itself based on the screen size, ensuring that your website looks great on mobile devices, tablets, and desktops.
- Improved CSS: Bootstrap 3 adopts a flat design, with cleaner and more modern UI components. It removes the skeuomorphic design trends of the past and embraces a minimalist look.
- New Components: Bootstrap 3 includes several new components such as panels, list groups, and thumbnails, providing even more reusable elements to build interfaces quickly.
- Removable Gutter: Developers can now easily remove the gutter (spacing between columns) by using
.no-gutters, giving more control over spacing in the layout. - JavaScript Plugins: Bootstrap 3’s JavaScript plugins were improved for better usability and customization, including better modals, tooltips, and more robust popovers.
Now that you’re familiar with the improvements and features of Bootstrap 3, let’s get into the practical aspect—building a responsive website.
Getting Started with Bootstrap 3
1. Include Bootstrap in Your Project
To start using Bootstrap 3, the first step is to include the necessary CSS and JavaScript files. You can either download Bootstrap from the official website or use a Content Delivery Network (CDN) to include the files in your project.
Here’s how you can add Bootstrap 3 via CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website with Bootstrap 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>This HTML file includes both the Bootstrap CSS and JavaScript via CDN. Notice the meta viewport tag, which is crucial for making the page responsive on mobile devices. It tells the browser to adjust the page’s width based on the device’s screen size.
2. Understanding the Bootstrap Grid System
One of Bootstrap’s core features is its grid system, which helps developers create responsive layouts quickly. The grid is based on a 12-column system, and you can define different layouts for different screen sizes:
- xs for extra small devices (phones)
- sm for small devices (tablets)
- md for medium devices (desktops)
- lg for large devices (larger desktops)
Here’s an example of a basic grid layout:
<div class="container">
<div class="row">
<div class="col-md-4">
Column 1
</div>
<div class="col-md-4">
Column 2
</div>
<div class="col-md-4">
Column 3
</div>
</div>
</div>
In this layout, the content is divided into three equal columns on medium (desktop) devices. Each column occupies 4 out of 12 grid units (col-md-4), ensuring that all three columns sit side by side.
For a responsive layout that adapts to different screen sizes, you can combine different column classes. For example:
<div class="col-xs-12 col-sm-6 col-md-4">
Responsive Column
</div>
This column will span across all 12 columns on extra-small screens, take up half the space on small screens, and occupy a third of the space on medium screens.
3. Building a Simple Responsive Page
Let’s create a simple responsive page using Bootstrap 3’s grid system, navigation, and buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Site</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Welcome to My Responsive Website</h2>
<p>This is a simple demonstration of how you can build responsive websites using Bootstrap 3. Resize your browser window to see how the layout adapts to different screen sizes.</p>
</div>
<div class="col-md-4">
<h3>Sidebar Content</h3>
<p>This is a sidebar that will shift below the main content on smaller screens.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Feature 1</h3>
<p>Some description about feature 1.</p>
</div>
<div class="col-md-4">
<h3>Feature 2</h3>
<p>Some description about feature 2.</p>
</div>
<div class="col-md-4">
<h3>Feature 3</h3>
<p>Some description about feature 3.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
In this example:
- We use a navbar component for easy navigation.
- The page’s main content area is divided into two sections: the main content and a sidebar. On smaller screens, the sidebar will drop below the main content.
- We also have a 3-column feature section that adjusts its layout based on the screen size.
4. Using Bootstrap’s Prebuilt Components
Bootstrap 3 offers numerous pre-built components, including buttons, forms, alerts, modals, and more. Here’s an example of using Bootstrap’s button classes:
<a href="#" class="btn btn-primary">Primary Button</a>
<a href="#" class="btn btn-success">Success Button</a>
<a href="#" class="btn btn-danger">Danger Button</a>
With just a few classes, you can create fully styled buttons that are responsive and consistent across different devices and browsers.
Conclusion
Bootstrap 3 has made building responsive websites easier than ever. By adopting a mobile-first approach and providing a flexible grid system, it allows developers to create sites that look great on any screen size. Whether you’re just starting out or looking to streamline your front-end workflow, Bootstrap 3 offers the tools and components you need to create modern, mobile-friendly websites quickly and efficiently.
In 2013, responsive web design is not just a trend
