Auto Layout Column
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>Grid medium</title> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous"> <style> [class*="col"], h2, p { padding: 1rem; background-color: green; border: 2px solid #fff; color: #fff; } </style></head><body> <div class="container text-center "> <h2>Welcome to w3wiki</h2> <p>Variable width content</p> <div class=" row"> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> HTML </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> HTML </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> HTML </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> HTML </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> CSS </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> CSS </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> CSS </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> CSS </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> JavaScript </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> JavaScript </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> JavaScript </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12"> JavaScript </div> </div> </div></body></html> |
Output:
Explanation:
In each row ,12 column elements are used.Each element contains classes to align the element with the respective screen size.For example when screen size is large i.e greater than 992px ,then each row has 4 columns according to the class col-lg-3 .As we reduce the screen size the number of column reduces and occupies 12 units.
Bootstrap 5 Grid Large
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). It provides a Faster and Easier way for Development.