Introduction to Bootstrap in HTML

Capítulo 16

Estimated reading time: 3 minutes

+ Exercise
Audio Icon

Listen in audio

0:00 / 0:00

Bootstrap is a web development framework that allows you to create responsive pages with a modern and attractive design. It is very popular with developers because it is easy to use and offers a wide range of ready-to-use features.

To start using Bootstrap in your HTML projects, you need to include the framework's CSS and JavaScript files in your code. You can do this by downloading the files directly from the Bootstrap website or including them via a CDN (Content Delivery Network).

Once the Bootstrap files are included in your HTML code, you can start using the framework's classes and components to build your page. For example, to create a responsive navigation menu, you can use Bootstrap's "navbar" class:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" 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>
  </nav>

This code will create a responsive navigation menu with a "hamburger" button that appears when the screen is zoomed out. When the button is clicked, the menu expands and shows navigation items. This is just one example of how Bootstrap can help you create responsive pages quickly.

Bootstrap also offers many other features such as layout grids, forms, buttons, icons and more. Combining these features with your knowledge of HTML and CSS, you can create stunning, modern web pages in no time.

Continue in our app.
  • Listen to the audio with the screen off.
  • Earn a certificate upon completion.
  • Over 5000 courses for you to explore!
Or continue reading below...
Download App

Download the app

In summary, Bootstrap is a very useful web development framework for creating responsive pages with a modern design. By including the framework's CSS and JavaScript files in your HTML code and using Bootstrap's classes and components, you can create amazing web pages in no time.

Now answer the exercise about the content:

_What is the role of Bootstrap in web development?

You are right! Congratulations, now go to the next page

You missed! Try again.

Bootstrap simplifies the process of using CSS and JavaScript files in HTML projects, allowing developers to create responsive and attractive web pages conveniently.

Next chapter

Bootstrap Components in HTML

Arrow Right Icon
Free Ebook cover Complete HTML Course
43%

Complete HTML Course

4.38

(8)

37 pages

Download the app to earn free Certification and listen to the courses in the background, even with the screen off.