Putting Content in Columns

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

If needed, you can put content into multiple columns using the ==== shortcode. Columns are separated by [==].

Example :

In bootstrap5 we have :

bootstrap5 
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

In Namaskar we will have :

input 
[====]
One of three columns
[==]
One of three columns
[==]
One of three columns
[/====]
output
One of three columns
One of three columns
One of three columns

2 columns

input 
[====]
First column
 [img "cat/cat1.jpg" "nice cat" ]
[==]
Second column
 [img "cat/cat2.jpg" "nice cat" ]
[/====]
output
First column
Second column

3 columns

input 
[====]
First column
 [img "cat/cat1.jpg" "nice cat" ]
[==]
Second column
 [img "cat/cat2.jpg" "nice cat" ]
[==]
Third column
 [img "cat/cat3.jpg" "nice cat" ]
[/====]
output
First column
Second column
Third column

4 columns

input 
[====]
First column
 [img "cat/cat1.jpg" "nice cat" ]
[==]
Second column
 [img "cat/cat2.jpg" "nice cat" ]
[==]
Third column
 [img "cat/cat3.jpg" "nice cat" ]
[==]
Fourth column
 [img "cat/cat4.jpg" "nice cat" ]
[/====]
output
First column
Second column
Third column
Fourth column

Advanced Columns

If we want 1 column on small screens, 2 columns on medium screens, 3 columns on medium screens, we can use the following :

input 
[cols sm=1 md=2 lg=3]
first image
 [img "cat/cat1.jpg" "nice cat" ]
[col]
2nd image
 [img "cat/cat2.jpg" "nice cat" ]
[col]
3rd image
 [img "cat/cat3.jpg" "nice cat" ]
[col]
4th image
 [img "cat/cat4.jpg" "nice cat" ]
[col]
5th image
 [img "cat/cat5.jpg" "nice cat" ]
[col]
6th image
 [img "cat/cat6.jpg" "nice cat" ]
[/cols]
output
first image
2nd image
3rd image
4th image
5th image
6th image