Having 4 columns in a row with Boostrap

Question

I'm using Bootstrap 4.5.1 to display 4 columns, looking like this.

Actual display of my 4 columns.

I want those 4 columns to be aligned in a single row (they shouldn't wrap).

Here's the code:

html

<div class="container flex-nowrap">
            <div class="featured-boxes">
                <div class="row">
                    <a href="<?= $this->Url->build(['controller' => 'Academy' , 'action' => 'index', 'language' => $this->request->getSession()->read('Config.language')]); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-graduation-cap"></i>
                                    <h4 class="text-uppercase"><?= __('Academy'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('academy.png', ['alt' =>  __('Academy'), 'class' => 'img-responsive img-rounded']); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Esports' , 'action' => 'index', 'language' => $this->request->getSession()->read('Config.language')]); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-gamepad"></i>
                                    <h4 class="text-uppercase"><?= __('Esports'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('esports.png', ['alt' => __('Esports')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Posts','action' => 'view','bar']); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-trophy"></i>
                                    <h4 class="text-uppercase"><?= __('Events'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('events.png', ['alt' => __('Events')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Posts','action' => 'view','bar']); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-group"></i>
                                    <h4 class="text-uppercase"><?= __('Gaming'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('gaming.png', ['alt' => __('Gaming')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

EDIT:

I modified my code to use col-sm-3 instead of col-sm for every column in the row. But now, the boxes are no more responsive. Why?

Here's the result I'm getting when shrinking the window by setting col-sm col-md-3 for every column:

Result

EDIT 2: *

I resolved my issue by using Boostrap img-fluid class for my images.

How can I achieve this?

Answer 1

A row consists of 12 columns that covers the whole screen. If you want to have 4 columns, each column should have a space of 3. The class to use should be col-sm-3

<div class="row">
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
</div>

Answer 2

Bootstrap guidelines dictates that if you want to have a row that contains columns . A row consists of 12 columns, so you if you want to have 4 columns, each column should have a space of 3. The class to use in this case should be col-sm-3 not just col-sm .

<div class="row">
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
</div>  <!-- end of row -->

However, your code is not following this standard. You have a <a></a> that is a sibling of these columns:

<div class="row">
   <a href="#">...</a>
   <div class="col-sm-3">...</div>
   <a href="#">...</a>
   <div class="col-sm-3">...</div>
   <a href="#">...</a>
   <div class="col-sm-3">...</div>
   <a href="#">...</a>
   <div class="col-sm-3">...</div>
</div>

You need to move the <a></a> link somewhere inside the columns. Otherwise, make the links themselves columns with proper size:

<div class="row">
   <a class="col-sm-3" href="#"> <div></div> </a>
   <a class="col-sm-3" href="#"> <div></div> </a>
   <a class="col-sm-3" href="#"> <div></div> </a>
   <a class="col-sm-3" href="#"> <div></div> </a>
</div>

Answer 3

When you are using divs you are using them as containers for the content that you want to show for the page.

You start making a grid (table layout) for your page with the main

<div class="container"></div>

This div can have two types of main class: "container" - does not take the whole screen (usually 1100 px width) or "container-fluid" takes whole screen, no matter how wide it is.

Then you start each line of your divs (row) inside container with:

<div class="row"></div>

Row means that you are virtually drawing a row that has 12 cells in it.

As you probably know different devices have different screen resolutions. So on some devices each of 12 cells will be larger, on some smaller. That is when you start using

<576px  Extra small .col-
≥576px  Small   .col-sm-    
≥768px Medium   .col-md- 
≥992px  Large   .col-lg-
≥1200px Extra large .col-xl-

What this table means that the bootstrap will try to keep divs together on the given size of the screen, based on total 12 available cells. For example if you want you cells to be together on the screen larger that 768, and become responsive on screens with lesser resolution use .col.md

<div class="col.md-6"></div>
<div class="col.md-6"></div>

Just remember that in any given row the sum of col-smth classes should always add to 12 and not more, you can 3+9, 2+2+2+2+2+2 etc.

When you want to start new row just use new row divs.

So the correct code for a grid of several divs would be smth like

<div class="container>

<div class="row">
    <div class="col-sd-4">Something here</div>
    <div class="col-sd-8"><a></a></div>
</div>

<div class="row">
    <div class="col-sd-3">Something here</div>
    <div class="col-sd-3">Something here</div>
    <div class="col-sd-3">Something here</div>
    <div class="col-sd-3">Something here</div>
</div>

</div>

Answer 4

尝试将每个“col-sm”更改为“col-sm-3” - 那么您是在设置宽度而不是让 Bootstrap 选择自己的宽度？