Bootstrap 3 Tutorial

Bootstrap 3 remains one of the most popular front-end frameworks for building responsive, mobile-first websites. Whether you’re a beginner or an experienced developer, this guide will help you quickly get started with Bootstrap 3.

In this tutorial from TheCodingCollege.com, we’ll walk you through:

  1. What Bootstrap 3 is.
  2. How to set up Bootstrap 3.
  3. The Bootstrap 3 Grid System.
  4. Key Bootstrap 3 Components.
  5. Building a simple responsive webpage using Bootstrap 3.

What is Bootstrap 3?

Bootstrap 3 is a free, open-source front-end framework created by Twitter to help developers build responsive and visually appealing websites quickly. It uses HTML, CSS, and JavaScript to streamline web design.

Key benefits of Bootstrap 3:

  • Responsive Design: Websites adjust seamlessly across devices (mobile, tablet, desktop).
  • Prebuilt Components: Includes buttons, forms, modals, navigation bars, and more.
  • Customizable: Modify Bootstrap’s styles and grid system to fit your project.

Setting Up Bootstrap 3

To use Bootstrap 3, include its CSS and JavaScript files in your project. You can use Bootstrap’s CDN (Content Delivery Network) for easy integration.

Add this to your HTML <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 3 Tutorial</title>
    <!-- Bootstrap 3 CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Add Bootstrap’s JavaScript and jQuery just before the closing </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap 3 Grid System

The Grid System is the core of Bootstrap 3, allowing you to create responsive layouts. It uses a 12-column layout with predefined classes like col-xs-, col-sm-, col-md-, and col-lg- for different screen sizes:

ClassScreen Size
xsExtra Small (<768px)
smSmall (≥768px)
mdMedium (≥992px)
lgLarge (≥1200px)

Example: 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>

This code creates a responsive layout with 3 equal-width columns on medium and larger screens.

Key Bootstrap 3 Components

Bootstrap 3 comes with many reusable components to speed up web development:

  1. Navigation Bar:
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">My Website</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>
  1. Buttons:
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
  1. Alerts:
<div class="alert alert-success">
    <strong>Success!</strong> You have successfully implemented Bootstrap 3.
</div>
  1. Forms:
<form>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Building a Responsive Web Page with Bootstrap 3

Here’s a simple example of a responsive webpage combining all the components we’ve discussed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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="#">TheCodingCollege</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h3>Column 1</h3>
                <p>This is a Bootstrap 3 grid example.</p>
            </div>
            <div class="col-md-4">
                <h3>Column 2</h3>
                <p>Responsive design made easy!</p>
            </div>
            <div class="col-md-4">
                <h3>Column 3</h3>
                <p>Learn more at <a href="http://thecodingcollege.com/">TheCodingCollege.com</a></p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="text-center">
        <p>© 2024 TheCodingCollege. All Rights Reserved.</p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Conclusion

Bootstrap 3 makes it incredibly easy to create responsive and mobile-friendly websites. With its grid system, prebuilt components, and ease of use, you can start building professional web pages in no time.

Leave a Comment