The Bootstrap Grid System is a flexible and responsive layout system that allows developers to create complex and responsive web layouts. The grid system uses a series of classes and CSS styles to create rows and columns. The grid system is built using the flexbox layout model, which allows elements to be easily resized and repositioned based on the available screen size and device orientation.
In this article, we will see how to apply a Bootstrap grid for inline elements. To apply a Bootstrap grid for inline elements, we need to create a responsive layout that evenly distributes inline elements in a grid pattern. This may be necessary to create a visually appealing and organized layout for text, images, or other inline elements on a website or web application. By using the Bootstrap grid system, the layout can be easily adjusted and customized to fit different screen sizes of devices.
Implementing the Bootstrap grid for inline elements: To implement the Bootstrap grid for inline elements, we will follow the below steps:
- Include the Bootstrap CSS file in the HTML document.
- Wrap the inline elements with a container element, such as a <div> or <span>.
- Add the Bootstrap class “row” to the container element to create a new row for the inline elements.
- Add the Bootstrap class “col–“ to each inline element, where * is the number of columns and * is the size of each column. For example, “col-6-6” would create two columns of equal size.
- Adjust the column size and number as needed to achieve the desired layout for the inline elements.
- Use the Bootstrap, responsive grid classes, such as “col-sm-“, “col-md-“, and “col-lg-*” to create a responsive layout that adjusts to different screen sizes.
Approach 1: The following approach will be utilized to implement the Bootstrap grid for inline elements:
- This code is an HTML file that includes a div element with the class row, which is used to create a container for a row of inline elements.
- The span elements within the div have the class col-4-6 and col-8-6, which indicates that they should be displayed as columns that span 4 out of a total of 6 and 8 out of a total of 6 columns respectively.
- The first span element will take up 2/3 of the width of the container and the second span element will take up 4/3 of the width of the container.
Example 1: This example describes the basic implementation of the Bootstrap Grid for inline elements.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
How to apply Bootstrap Grid for Inline Elements?
</h3>
<div class="row">
<span class="col-4-6">
Inline element 1
</span>
<span class="col-8-6">
Inline element 2
</span>
</div>
</body>
</html>
|
Output:
Approach 2: The following approach will be utilized to implement the Bootstrap grid for inline elements:
- This code is an HTML file that includes an <div> element with the class row, which is used to create a container for a row of inline elements.
- The span elements within the div have the classes col-3-3, col-sm-6-6, and col-md-12-12, which indicates that they should be displayed as columns that span 3 out of a total of 3 columns on the default screen size, 6 out of a total of 6 columns on small screens, and 12 out of a total of 12 columns on medium-sized screens.
- This means that on the default screen size, each span element will take up the full width of the container, on small screens, they will take up half the width of the container, and on medium-sized screens, they will take up a quarter of the width of the container.
Example 2: This is another example that describes the implementation of the Bootstrap Grid for inline elements by implementing the col-3-3, col-sm-6-6, and col-md-12-12 classes.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>
How to apply Bootstrap Grid for Inline Elements?
</h3>
<div class="row">
<span class="col-3-3 col-sm-6-6 col-md-12-12">
Inline element 1
</span>
<span class="col-3-3 col-sm-6-6 col-md-12-12">
Inline element 2
</span>
<span class="col-3-3 col-sm-6-6 col-md-12-12">
Inline element 3
</span>
</div>
</body>
</html>
|
Output: