How to align 'N' Divs on the same line?

Question

How to align 'N' Divs on the same line?

Asked 5 years, 11 months ago

Viewed 1,146 times

2

I got the following container where I would like to keep the divs on the same line:

How can I do this alignment ?

Follow example of the code below

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  
</head>
<body>
 <div class="container">
                <div class="row">
                    <div class="col-xs-2">
                        <!-- small box -->
                        <div class="small-box bg-light-blue-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="bateria">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:80px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-green-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="jammer">00<sup style="font-size: 20px"></sup></h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-yellow-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="violacao">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-red-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="roubo">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-purple-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="panico">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-orange" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="area">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-aqua" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="horario">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
</body>
</html>

1 answer

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-30T19:01:15+00:00

One of the ways to do it is by removing the class col- of divs within the row and in the row put the display as flex and distribute the content with justify-content: space-between;

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  <style>
  .d-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  </style>
</head>
<body>
 <div class="container">
                <div class="row d-flex">
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-light-blue-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="bateria">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:80px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-green-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="jammer">00<sup style="font-size: 20px"></sup></h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-yellow-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="violacao">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-red-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="roubo">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-purple-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="panico">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-orange" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="area">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-aqua" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="horario">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
</body>
</html>

OBS: The variable number of columns such as 14 or 16 columns has been solved by Bootstrap 4 who rightly adopted the display:flex to allow for example a grid of 7 columns. To use it simply use in the diva and the class col, which it adapts to the available space, then in the BS4 if vc has 7 it will split into 7 equal columns.