Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save CMS-Internetsolutions/f6da709ff641c7263cc26baf3cbef2ac to your computer and use it in GitHub Desktop.

Select an option

Save CMS-Internetsolutions/f6da709ff641c7263cc26baf3cbef2ac to your computer and use it in GitHub Desktop.
This code snippet creates a container with two columns, one for each column. The first row contains the text "With more content" and another is displayed in an even-more border of different cells (row sizes) using CSS styles

Bootstrap 5 Container with Multiple Contents

Preview:
<div class="container">
  <div class="row align-items-stretch">
    <div class="col">
      <div class="p-3 border bg-light">Column 1</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column 2<br>With more content</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Column 3<br>With even more content<br>With even more content<br>With even more content</div>
    </div>
  </div>
</div>
Associated Context
Type Code Snippet ( .html )
Associated Tags Boostrap 5 HTML container Row align-items-stretch Col col CSS styling more content even more content HTML tags Framework: Bootstrap HTML CSS Bootstrap Grid System Responsive Design Container Row Column Alignment Content Layout
💡 Smart Description This code snippet creates a container with two columns, one for each column. The first row contains the text "With more content" and another is displayed in an even-more border of different cells (row sizes) using CSS styles
This code snippet creates a container with three columns. Each column has a border, a light background, and some content. The columns are aligned vertically and stretch to fill the container.
🔎 Suggested Searches HTML code for a container with row and col classes
How to create a grid layout in HTML using CSS
Code snippet for creating a responsive horizontal divs of rows that appear at the top level
Html code for displaying multiple columns from an element's children
Example code for styling two elements within a cell
HTML code for creating a three-column layout with equal height columns
CSS code for aligning items in a row and stretching columns
How to create a responsive container with three columns in HTML
Code snippet for creating a bordered and background-colored container with three columns
Example code for creating a three-column layout with varying content in each column
Related Links https://www.geeksforgeeks.org/html-introduction/
https://www.geeksforgeeks.org/html-forms/
https://www.geeksforgeeks.org/html-tables/
https://www.html.am/html-codes/buttons/html-button-tag.cfm
https://www.html.am/html-codes/forms/html-form-tag.cfm
https://www.html.am/html-codes/forms/html-select-tag.cfm
https://getbootstrap.com/docs/5.0/layout/grid/
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://www.geeksforgeeks.org/bootstrap-4-grid-system/
https://www.tutorialspoint.com/bootstrap/bootstrap_grid_system.htm
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
https://www.educba.com/bootstrap-grid-system/
Related People CMS-Internetsolutions
Sensitive Information No Sensitive Information Detected
Shareable Link https://user-b25c206f-7f5f-48a2-8608-91c6ad29df4f-gnltj66l2a-uk.a.run.app/?p=fa2148bfdf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment