---

Bootstrap Tutorial: Build a Simple Responsive Webpage

In this Bootstrap tutorial, you’ll learn how to use Bootstrap to create a basic webpage with a navigation bar and a button. Bootstrap is a free framework for building responsive, mobile-friendly websites easily.

---

What You’ll Learn

• Adding Bootstrap to your project
• Creating a responsive navigation bar
• Styling a button with Bootstrap classes
• Checking responsiveness on different screens

---

Prerequisites

• Basic knowledge of HTML
• A text editor (e.g., VS Code, Notepad)
• A web browser (e.g., Chrome, Firefox)

---

Step 1: Add Bootstrap CSS

To use Bootstrap, you need its CSS and JavaScript. For this tutorial, assume Bootstrap is included in your project using a CDN (we’ll only show the content code, not the <link> or <script> tags as requested).

Start with a navigation bar.

---

Step 2: Create a Navigation Bar

Add a responsive navigation bar using Bootstrap’s navbar classes. Use this code:

<nav class="navbar navbar-expand-lg bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Page</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Explanation:

• navbar-expand-lg: Makes the navbar horizontal on large screens.
• bg-primary: Sets a blue background.
• navbar-toggler: Adds a menu button for mobile devices.
• nav-link: Styles the menu items.

Place this in your HTML file (we’re skipping the outer tags as requested). When viewed in a browser, you’ll see a blue navbar with links.

---

Step 3: Add Content and a Button

Below the navbar, add a heading, text, and a button. Use this code:

<div class="container mt-3">
    <h1>Welcome!</h1>
    <p>Create websites with Bootstrap.</p>
    <button class="btn btn-success">Click Here</button>
</div>

Explanation:

• container: Centers and constrains the content.
• mt-3: Adds margin-top for spacing.
• btn btn-success: Creates a green button.

This adds a centered section with a heading, paragraph, and button.

---

Step 4: Test Responsiveness

Bootstrap ensures your page works on all devices. Try these:

1. Resize your browser to a smaller size.
2. Click the navbar’s menu icon to see the mobile menu.
3. Check the page on a phone (if testing locally).

The navbar should collapse into a menu icon, and the content should adjust smoothly.

---

Step 5: Customize the Button

Let’s tweak the button. Replace the button line with:

<button class="btn btn-outline-success btn-lg">Click Here</button>

Explanation:

• btn-outline-success: Uses a green outline style.
• btn-lg: Makes the button larger.

This updates the button to a bigger, outlined version.

---

Final Code

Here’s the complete content code (tags like div, nav, etc., only):

<nav class="navbar navbar-expand-lg bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">My Page</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container mt-3">
    <h1>Welcome!</h1>
    <p>Create websites with Bootstrap.</p>
    <button class="btn btn-outline-success btn-lg">Click Here</button>
</div>

---

Output

Your webpage should show:

• A blue navigation bar with “My Page” and three links.
• A centered heading, paragraph, and a large green outline button.
• On mobile, the navbar collapses into a menu icon.

---

Next Steps

• Explore Bootstrap’s official docs for components like forms or images.
• Try changing bg-primary to bg-dark or bg-info for new navbar colors.
• Add more elements, like a div with a Bootstrap card.

---

Conclusion

You’ve built a responsive webpage using Bootstrap! With minimal code, you created a modern layout. Keep experimenting to master Bootstrap’s features.

Happy coding!

---