Bootstrap 3 Tutorial


 

Bootstrap 3 Tutorial

Bootstrap 3 is a popular front-end framework that focuses on responsive, mobile-first web design. Its grid system, pre-designed components, and built-in utilities simplify the process of building visually appealing and responsive websites.

Getting Started with Bootstrap 3

To use Bootstrap 3, include its CSS and JavaScript files in your HTML. You can download Bootstrap 3 from the official site or use a CDN to link the files directly.

html
<!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 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Bootstrap 3</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>

    <!-- Main Content -->
    <div class="container">
        <h1>Welcome to Bootstrap 3</h1>
        <p>This is a simple template using Bootstrap 3's responsive grid and components.</p>

        <!-- Grid System -->
        <div class="row">
            <div class="col-sm-4">
                <h3>Column 1</h3>
                <p>Content for the first column.</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 2</h3>
                <p>Content for the second column.</p>
            </div>
            <div class="col-sm-4">
                <h3>Column 3</h3>
                <p>Content for the third column.</p>
            </div>
        </div>
    </div>

    <!-- Bootstrap 3 JavaScript and dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Key Features of Bootstrap 3

  1. Responsive Grid System:

    • Bootstrap 3 uses a 12-column responsive grid system, making it easy to create layouts that adapt to various screen sizes.
    • Use classes like col-sm-4, col-md-6, etc., to create responsive columns based on screen width.

  2. Pre-designed Components:

    • Includes buttons, navigation bars, dropdowns, forms, modals, and more.
    • Each component comes with predefined styles that you can customize using your own CSS.

  3. JavaScript Plugins:

    • Includes optional JavaScript plugins for components like modals, tooltips, carousels, and popovers.
    • Add interactivity by including the Bootstrap JavaScript file and any dependencies, such as jQuery.

  4. Utility Classes:

    • Provides classes for text alignment, color, background, spacing, visibility, and more.
    • Utility classes make styling quick and reduce the need for custom CSS.

 

Conclusion

Bootstrap 3 provides an easy-to-use, flexible framework for responsive design. With its grid system, extensive component library, and utilities, you can quickly build beautiful, mobile-friendly websites. Use this template to get started, and explore Bootstrap’s various components to further customize your projects.