Auto Layout Columns
Example: Illustration of Auto Layout Column using Boostrap.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Grid XLarge - Auto Layout Columns</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous"></head><body class="container text-center"> <h2 class="p-4 bg-success text-white"> Welcome to w3wiki </h2> <p class="p-4 bg-success text-white"> Variable width content </p> <div class="row"> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> HTML </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> CSS </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> Javascript </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> ReactJs </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> NextJs </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 p-4 bg-success text-white"> MongoDB </div> </div> <!-- Bootstrap JS dependency --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-9XQy42k1z6v5Od1F7L1P4j3Lko8dADJ3g23Bd7MooP7yyA2MIu+tgslXqUNW8Asg" crossorigin="anonymous"> </script></body></html> |
Output:
Explanation
In the given layout, a grid system with 12 columns is implemented for each row, utilizing only 6 div elements. Each div is assigned classes that determine its alignment based on the screen size. For instance, in larger screens (greater than 1200px), each row is structured with 4 columns using the col-lg-3 class for optimal spacing. As the screen size decreases, the number of columns in each row adjusts proportionally, ensuring the effective utilization of all 12 units while using only 6 div elements.
Bootstrap 5 Grid XLarge
Bootstrap is a free and open-source tool for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and all sizes of screens (Desktop, Tablets, Phablets, and Phones).