|
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.
Grid Large Bootstrap Grid is a layout system that uses a 12-column grid to style a website. When the screen size is ≥992 px, a large grid is applied, and the elements align accordingly to the screen size using an auto-column layout. We can also specify the variable width of each element by mentioning the number along with the class, for example, .container-lg-4. If the screen size is less than 992 px, then the element takes up 100% width of the screen.
| Breakpoint | Description | Size (px) |
|---|
| xs | Extra Small (default) | < 576 | | sm | Small | ≥ 576 | | md | Medium | ≥ 768 | | lg | Large | ≥ 992 | | xl | Extra Large | ≥ 1200 | | xxl | Extra Extra Large | ≥ 1400 |
Syntax:<tag_name class="class-lg">Content of the element </tag_name> Grid Large with Equal Size and Using Only LargeExample: Illustration of Grid Large with Equal Size and using Only Grid Large in Bootstrap 5.
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/[email protected]/dist/js/bootstrap.min.js"
integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/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 GeeksforGeeks</h2>
<p>Equal width </p>
<div class="row">
<div class="col-lg">HTML</div>
<div class="col-lg">HTML</div>
<div class="col-lg">HTML</div>
<div class="col-lg">HTML</div>
</div>
<div class="row">
<div class="col-lg">CSS</div>
<div class="col-lg">CSS</div>
<div class="col-lg">CSS</div>
<div class="col-lg">CSS</div>
</div>
<div class="row">
<div class="col-lg">JavaScript</div>
<div class="col-lg">JavaScript</div>
<div class="col-lg">JavaScript</div>
<div class="col-lg">JavaScript</div>
</div>
</div>
</body>
</html>
Output:
Auto Layout ColumnExample: 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/[email protected]/dist/js/bootstrap.min.js"
integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/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 GeeksforGeeks</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.
|
