Bootstrap is one of the most popular and widely used front-end development frameworks around the world. It is a CSS and JavaScript library that can be used to create dynamic web pages and responsive user interfaces. Bootstrap provides a set of pre-designed templates, classes, and components that can be easily integrated into an HTML document to improve the web design and add interactivity to it. In this article, we will cover how to use Bootstrap in HTML step by step to design interactive and responsive web pages.
Step 1: Download Bootstrap
The first and foremost step to use Bootstrap in an HTML document is to download it. You can download Bootstrap from the official website (getbootstrap.com) or from the GitHub repository. Bootstrap can be downloaded as a compiled CSS and JavaScript file or as a source code that needs to be compiled and customized according to project requirements. Once downloaded, extract the Bootstrap folder and save it in your project directory.
Step 2: Link Bootstrap Files to HTML Document
Once the Bootstrap folder is saved in the project directory, the next step is to link the Bootstrap files to the HTML document. Open the HTML document in a text editor and add the following code in the head section of the HTML document.
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>The first line includes the Bootstrap CSS file, the second line includes the jQuery library, and the third line includes the Bootstrap JavaScript file. Make sure to replace “/path/to/” with the actual path to the Bootstrap files in your project directory.
Step 3: Create a Basic HTML Structure
After linking the Bootstrap files to the HTML document, the next step is to create a basic HTML structure for the web page. This structure includes the HTML, head, and body tags, along with other necessary tags such as header, main, and footer. The header tag contains the logo and navigation menu, the main tag contains the main content of the web page, and the footer tag contains the copyright and other legal information.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Bootstrap Web Page</title>
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Web Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<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>
</header>
<main role="main">
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Welcome to my web page</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the
larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Heading 1</h2>
<p>Paragraph 1</p>
</div>
<div class="col-md-4">
<h2>Heading 2</h2>
<p>Paragraph 2</p>
</div>
<div class="col-md-4">
<h2>Heading 3</h2>
<p>Paragraph 3</p>
</div>
</div>
<hr>
<footer>
<p>© 2021 My Bootstrap Web Page</p>
</footer>
</div>
</main>
</body>
</html>Step 4: Add Bootstrap Classes and Components
Now that the basic structure of the HTML document is created, the next step is to add Bootstrap classes and components to it to enhance its design and functionality. Bootstrap provides a wide range of classes and components such as typography, tables, forms, buttons, images, alerts, and many more. These classes and components can be added to the HTML document by simply adding the class or component name to the corresponding HTML tag.
For example, to make a button using Bootstrap, add the “btn” and “btn-primary” classes to the appropriate HTML tag.
<button class="btn btn-primary">Click me!</button>Another example is to make an alert using Bootstrap.
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>Bootstrap also provides a set of grid classes that allow creating responsive layouts. Grid classes can be added to the HTML document by using the “container”, “row”, and “col-” classes.
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Column 1</p>
</div>
<div class="col-md-4">
<p>Column 2</p>
</div>
<div class="col-md-4">
<p>Column 3</p>
</div>
</div>
</div>The above code will create a row containing three equal-width columns. On smaller screens, the columns will stack vertically instead of horizontally, and on larger screens, the columns will adjust their width automatically.
Step 5: Customize Bootstrap
Bootstrap is highly customizable, allowing you to create your own styles and components. To customize Bootstrap, you can edit the source files in the downloaded Bootstrap folder or use the Bootstrap customization tool available on the official website. The customization tool enables you to select the components and styles you want to use, adjust their settings, and generate a customized version of Bootstrap that you can download and use in your project.
Conclusion
Bootstrap is a powerful front-end development framework that allows creating interactive and responsive web pages quickly and efficiently. In this article, we covered how to use Bootstrap in HTML step by step by downloading Bootstrap, linking Bootstrap files to an HTML document, creating a basic HTML structure, and adding Bootstrap classes and components to it. We also learned how to customize Bootstrap to suit your project requirements. By following these steps, you can take advantage of all the benefits that Bootstrap has to offer to improve your web design and create dynamic user interfaces.
📕 Related articles about HTML
- How to Make a Table in HTML
- How to make website using bootstrap
- HTML Input Form Attributes: Everything You Need to Know
- How to Make Your Own HTML: A Comprehensive Guide
- How to Make a 404 Page in HTML
- How to Use HTML5: The Complete Guide
