How to use Only XXL In Bootstrap
XXL is referred as extra extra large,it occupies the screen size ≥1400 px.For the screen size greater than 1400 px if there are more than one column ,they are equally divided for the screen size.
Example:
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 dashed #f3f3f3; color: #fff; } </style></head><body> <div class="container text-center "> <h2>Welcome to w3wiki</h2> <p>Equal width </p> <div class="row"> <div class="col-xxl">Element 1</div> <div class="col-xxl">Element 2</div> <div class="col-xxl">Element 3</div> <div class="col-xxl">Element 4</div> </div> </div></body></html> |
Output: The output contains the container with heading ,paragraphs along with row and columns.As the screen size of the laptop is less than required each element takes nearly 100% of the screen size.
Bootstrap 5 Grid XXL
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. It is used to create Platform-independent web pages.