/    /  Bootstrap Responsive Layout

Bootstrap Responsive Layout

 

Responsive(container-fluid) web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices(mobile, laptop, large laptop, etc.).

With the growing trend of smartphones and tablets, it has become almost ignore the optimization of websites for mobile devices. Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much fewer efforts.

Responsive layouts(container-fluid) is automatically adjusted and adapt to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone. See the following Illustration.

 

Bootstrap4 Responsive Layout

 

Creating Responsive Layout with Bootstrap: 

 

The Bootstrap 4 powerful mobile-first flexbox grid system creating responsive(container-fluid) and mobile-friendly websites and applications have become much easier.

 

Example:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responsive Layout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
  <div class="container-fluid">
    <a href="#" class="navbar-brand mr-3">Responsive layouts</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link active">Home</a>
        <a href="#" class="nav-item nav-link">Home2</a>
        <a href="#" class="nav-item nav-link">Home3</a>
        <a href="#" class="nav-item nav-link">Home4</a>
      </div>
      <div class="navbar-nav ml-auto">
        <a href="#" class="nav-item nav-link">Register</a>
      </div>
    </div>
  </div>   
</nav>
<div class="container">
  <div class="jumbotron">
    <h1>Learn to Create Websites</h1>
    <p class="lead">enter content here.....</p>
    <p><a href="#" class="btn btn-success btn-lg">Get started today</a></p>
  </div>
  <div class="row">
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>HTML</h2>
      <p>enter content here......</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>CSS</h2>
      <p>enter content here......</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>JavaScript</h2>
      <p>enter content here......</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>Bootstrap</h2>
      <p>enter content here.....</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>PHP</h2>
      <p>enter content here.....</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>SQL</h2>
      <p>enter content here.....</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>References</h2>
      <p>enter content here......</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
    <div class="col-md-6 col-lg-4 col-xl-3">
      <h2>FAQ</h2>
      <p>enter content here.....</p>
      <p><a href="#" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
    </div>
  </div>
  <hr>
  <footer>
    <div class="row">
      <div class="col-md-6">
        <p>Copyright &copy;</p>
      </div>
      <div class="col-md-6 text-md-right">
        <a href="#" class="text-dark">Terms of Use</a>
        <span class="text-muted mx-2">|</span>
        <a href="#" class="text-dark">Privacy Policy</a>
      </div>
    </div>
  </footer>
</div>
</body>
</html>

 

OUTPUT:

 

Bootstrap4 Responsive Layout