The motive of this article is to align the content into four columns where the first two columns denote the labels and its content and the last two columns denote the labels and its content. The class “row” and “col” are used to create a grid which can be represented by a number of rows and columns. The class “row” creates a row into which the content will be placed and the class “col” creates partitions in that row making space for 4 labels or 4 items to be placed in that row.
This example uses Bootstrap to create four columns where the first two columns represent the labels and its content and the last two columns represent the labels and its content.
- Bootstrap (Part-8) | Badges, Labels, Page Headers
- How to align flexbox columns left and right using CSS ?
- How to align content of a div to the bottom using CSS ?
- CSS | align-content property
- How to align button to right side of text box in Bootstrap?
- How to align buttons in Card footer in Bootstrap ?
- How to create five equal columns in Bootstrap ?
- How to accordion scroll to top to open content in Bootstrap ?
- Bootstrap | Close Icon for dismissing content with Examples
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- Include Bootstrap in AngularJS using ng-bootstrap
- CSS | Align
- CSS | align-self Property
- CSS | align-items Property
- HTML | <tr> align Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.