Bootstrap website layout [bootstrap]

Bootstrap website layout

bootstrap

Bootstrap is a popular CSS framework that provides a set of pre-designed layout options that you can use as a starting point for your website. It includes a grid system that allows you to create a responsive, mobile-first layout with precise control over the position of each element.

To create a layout using Bootstrap, you will need to include the Bootstrap CSS file in your HTML file and then use the Bootstrap classes and styles in your HTML elements. Here is an example of a simple Bootstrap layout:

<!doctype html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <header>
          <h1>Welcome to My Website</h1>
        </header>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="col-md-9">
        <main>
          <h2>About My Website</h2>
          <p>This is my website where I share my thoughts and ideas.</p>
        </main>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <footer>
          <p>Copyright 2021</p>
        </footer>
      </div>
    </div>
  </div>
</body>
</html>

In this example, the container-fluid class creates a full-width container, and the row and col-md-* classes create a grid with 12 columns. The header, nav, and main elements are placed inside the grid cells to create the layout. You can customize this layout by modifying the grid classes and adding your own content to the elements.

Bootstrap website layout

Other Article on Tag bootstrap

All Tags