DIV Bootstrap Alignment

Asked

Viewed 840 times

1

I used the code @hugocsl gave me and it was aligned, but now it’s tiny in responsive. I used min-width and it worked!

.img map { float: left; border:1px Solid; } map {. 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>
html css div responsive alignment

  • I think you are still having doubts about the bootstrap Grid system, take a look at this tutorial of w3s https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp in English (I recommend using the Chrome translator if you do not understand, the translation in this case is good)that will help you greatly

  • Another problem I’m having is that it is partially aligned on the smartphone and completely misaligned on the computer.

  • Hello Lila. You can edit your question by clicking on the "edit" link just below where the tags appear (html,css) Edit and include this text there, is more readable. As for your problem I could not replicate, at least not on the computer. I copied your code and put it on jsfiddle, see how you are: https://jsfiddle.net/Pontual/aq9Laaew/54779/

  • Your replica has been aligned exactly as needed, but the page is not at all!

  • Then the problem may be other page attributes, or even references to the bootstrap. Include the full html code of your page in the page, including the head also. Click on this link to edit your question: https://answall.com/posts/309700/edit

  • What is the purpose of putting the pieces of the images on the grid? Wouldn’t it be better to use them outside the grid? What is your intention to mount the map with Grid?

  • I need to turn a map into links to access different regions and that’s the only way I could do it.

  • @Ricardopunctual It runs the head and does not show the code, but I cleaned the page completely leaving only the Bootstrap call. <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"> </head> <body>

  • Take a look again at the link I’ve assembled jsfiddle on the left has an icon with the number "5", clicking there you will see all the references of bootstrap that I used. Apart from the font-awesome.min.css and the Popper.min.js, the other 3 have to be on your site, it seems to me that you are forgetting some library. The bootstrap has a pitch .js and a .css and also the jquery, see if this isn’t missing in your head

  • @Ricardopunctual I used a code indicated here by hugocsl and was aligned, now I just need to adjust the size in the responsive, because the map became tiny. I had taken the references to test the alignment. Thank you very much!

  • @Lilabastos if this using bootstrap do not see why create a grid from scratch, as the hugocsl response suggested, it is better to use the bootstrap ready soon and read the answers indicated in the links that I and Bacco send you.

Show 6 more comments

3 answers

1


You don’t necessarily need to place the images inside the Grid, you can only separate them by Rows as you did.

With just a few lines of CSS you can align everything, I left the images with a border just for you to see that they remain 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>

  • Hugo with this code I was able to align, but in the responsive it is tiny. A min-width solves?

  • @Lilabastos edits your answer with an image of how it is on your screen or the full code of how it is at the moment. Here I tested and did not get small no, actually the image starts to crop when the screen becomes less than 375px wide

  • It worked with min-width! Thank you very much.

  • @Cool lilabastos that worked!! If your question has already been answered consider marking an answer as accepted in this icon ✔ the side of the answer you used, so the question is not pending on the site as Question without Answer Accepted. Good luck with the project

0

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

0

Follow the class rule for each screen type

larger than 576 class. col-Sm-

larger than 768 class . col-Md-

larger than 992 class . col-lg-

larger than 1200 class . col-Xl-

You can combine the values, example in a div using col-Sm-12 and col-lg-6 in case the result would be on screens larger than 576 until 992 would create 12 columns and on larger screens would stay with 6 columns

See the documentation on the website https://getbootstrap.com/docs/4.0/layout/grid/ She explains well these steps

Browser other questions tagged html css div responsive alignment

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