DIV Alignment Bootstrap [duplicate]

Navigation
1

I used the code that @hugocsl pointed me to and aligned, but now it gets minuscule on the responsive. I used the min-width and it worked!

.mapa img {     float: left;     border: 1px solid; } .mapa {     display: flex;     justify-content: center; }

                                                                                                                                                                                                

<div class="row mapa">
    <div class="">
        <a href="">
            <img src="https://i.stack.imgur.com/Q9OVp.png"title="Goiania" style="display:block">
        </a>
    </div>
    <div class="">
        <a href="">
            <img src="https://i.stack.imgur.com/RvW7B.png"title="Brasília" style="display:block">
        </a>
    </div>
    <div class="">
        <a href="">
            <img src="https://i.stack.imgur.com/vbYRO.png"style="display:block">
        </a>
    
asked by anonymous 25.06.2018 / 20:57

3 answers

1

You do not necessarily need to put the images inside the Grid, you can only separate them by the ROWs as you did.

With just a few lines of CSS you can align everything, I left the images with a border just to see that they are still divided. 

.mapa img {
    float: left;
    border:1px solid;
}
.mapa {
    display: flex;
    justify-content: center;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div class="container">
    <div class="row mapa">
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/i5Vzl.png"title="" style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/hHQpz.png"style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/DhGD3.png"style="display:block">
            </a>
        </div>
    </div>

    <div class="row mapa">
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/Q9OVp.png"title="Goiania" style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/RvW7B.png"title="Brasília" style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/vbYRO.png"style="display:block">
            </a>
        </div>
    </div>

    <div class="row mapa">
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/bmrvy.png"title="São Paulo" style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/a9S77.png"title="Resende" style="display:block">
            </a>
        </div>
        <div class="">
            <a href="">
                <img src="https://i.stack.imgur.com/iBYFr.png"title="Rio de Janeiro" style="display:block">
            </a>
        </div>
    </div>
</div>
    
25.06.2018 / 22:11
0

Probably the problem is that you are not respecting the 12 columns. 8 + 1 + 2 = 11
try putting 1 more somewhere like 9 + 1 + 2, or 8 + 1 + 3 that you should solve

    
25.06.2018 / 21:00
0

The class rule for each type of screen follows

greater than 576 class .col-sm -

greater than 768 class .col-md -

greater than 992 class .col-lg -

greater than 1200 class .col-xl -

You can combine the example values into a div using col-sm-12 and col-lg-6 in case the result would be on screens larger than 576 up to 992 would create 12 columns and on larger screens would get 6 columns

See the documentation on link She explains these steps quite well

    
25.06.2018 / 21:05
Laravel Error count () laravel / datatables 5.2 PHP -v 7.2 Close file used by Visual Basic .NET