bootstrap

Start by visiting the Bootstrap website and copying the CDN (Content Delivery Network) links for the Bootstrap CSS and JavaScript files. You will need to include these links in the <head> section of your HTML page to use Bootstrap.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

2. Create a new HTML file and add the necessary HTML structure for a Bootstrap page. This includes the declaration and the CDN links you copied in the previous step.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Bootstrap Landing Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

3. Add a single element to your HTML file to create a navigation bar. You can use the navbar class to style the navigation bar using Bootstrap. You can also use the navbar-brand class to add a logo or brand name to the navigation bar.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">My Website</a>
    </div>
  </div>
</nav>

4. Add content to your HTML file using Bootstrap's grid system. You can use the row and col classes to create a grid of rows and columns, and use the col-* classes to specify the width of each column. For example, to create a grid with three equal-width columns, you can use the following code:

<div class="row">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

4.1 (Optional)

You can also use the offset-* classes to add empty columns to your grid and offset your content. For example, to create a grid with a single column offset by three columns, you can use the following code:

<div class="row">
  <div class="col-3 offset-3">Column 1</div>
</div>

Use Bootstrap's pre-designed components and styles to add additional content to your HTML page. You can use things like buttons, forms, navbars, and cards to create a professional-looking layout quickly and easily. For example, you can use the form-group class to create a form:

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

5. Customize the appearance of your HTML page by overriding the default Bootstrap styles using your own CSS. You can use the style attribute in your HTML elements to add inline CSS, or you can create a separate CSS file and link to it in the of your HTML page.

For example, to change the background color of your page to blue, you can use the following CSS:

body {
  background-color: blue;
}

6. Publish your HTML page online so that others can access it. You can use Git Hub Pages or Vercel both are FREE!

I hope these steps help you get started with using Bootstrap :)

Thank you for reading my first PUBLISHED article, it was my first and it was fun! I may write more in the future. Please don't hesitate to contact me if you have questions about this tutorial.

-Ruben

Learn how to use Bootstrap to create a responsive landing page

Did you find this article valuable?