Aligning images responsively with bootstrap

Question

Aligning images responsively with bootstrap

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I'm using the bootstrap and my goal is to make fluid boxes that are grouped in lines of 4. When I change the size of the screen I want the boxes to decrease (I did) but when I reach a certain point, I want them to align of 2 in 2 and finally one in each line. The problem is that they soon pass to one on each line getting poorly on the screen. I want something like this on this site: link

My html code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap for Web Design</title>
    <meta name="description" content="A Tuts+ course">

    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/custom.css">

  </head>
  <body>

<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-md-3">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="events-cost">Gratuito</div>
<div class="events-name">DJ Precatado Tour Smart 2015</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Música</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Meo Arena</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
<div class="events-action">
<button type="button" class="btn btn-success btn-sm">Inscrever-se</button></div>

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="events-cost">20.00€ - 45.00€</div>
<div class="events-name">Vinil e K7. Que futuro?</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Conferências</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Armazém 77</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
<!--<div class="events-action">
<button type="button" class="btn btn-success btn-sm">Comprar</button></div>-->

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="events-cost">Gratuito</div>
<div class="events-name">Como fazer massa italiana em português</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="events-cost">2.500€</div>
<div class="events-name">Windows 28 - Como entrar?</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="categoria">A1</div>
<div class="events-name">DJ Smart Prec Tour 2015</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="categoria">B1</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="categoria">C1</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="categoria">D1</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->


    <!-- Latest compiled and minified JavaScript -->
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script><scriptsrc="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  

</body>
</html>

My css:

h1{
    font-size:40px;
    color:#FFF;
    background-color: #52b266;
    }

.blue-title{    
    font-size:35px;
    color:#333c4e;
    }

.blue-sub-title,
.white-sub-title {
    font-size:22px;
    font-weight:bold;
}

.blue-sub-title{
    color:#333c4e;
    }

.white-sub-title{
    color:#fff;
    }   

.main-title{
    max-width:1130px;
    margin: 0 auto;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
    }

.main-box{
    background:#e6f0f3;
    width:100%;
    height:100px;
    left:0;
    margin:0px;
    padding:10px;
    text-align:center;
    }


.content{
    max-width:1130px;
    margin:0 auto;

    }

.events-box{
    background:#fff;
    border: 1px solid #CCC;
    max-width:300px;
    height:100%;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 0px 8px #888888;
    padding:20px;

    }

 a:hover {
    text-decoration:none;
    }

.events-box img {
    max-width:100%;
    height:auto;

}

.events-cost{
    color:#00a651;
    background:white;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    font-size:15px;
    text-transform:uppercase;
    margin-top:-20px;
    text-align:center;
    max-width:100%;

    }

.events-name{
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin-top:10px;
    }

.events-place{
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
    }

.events-date{
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
    }   


.events-cat{
    font-size:18px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#666;
    }   

.events-action{
    max-width:100%;
    text-align:right;
    margin: 0 auto;
    margin-top:5px;



    }


/*
img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.featured-events-list li {
    list-style: none;
    width: 100%;
    font-size: 1.5em;
    margin: .5%;
    float: left;
    position: relative;
    margin-bottom: 20px;
    line-height: normal;
    min-height: 250px;
    width: 24% ;
}

*/

@media screen and (max-width: 400px) {
    .blue-sub-title {
        font-size:14px;
    }

h1{
    font-size:20px;
    color:#FFF;
    background-color: #52b266;
    }

.white-sub-title{
    display:none;

    }

.events-box{
    width:100%;
    height:auto;
    }

.events-box img {
    max-width:100%;
}

.events-cost{
    max-width:100%;

    }

}

Thank you.

imagem twitter-bootstrap layout-responsivo

asked by anonymous 16.09.2015 / 19:29

2 answers

2

This is Paul:

If you want 3 boxes on a larger screen, you will use the class: col-md-4 Since the grid is 12 columns you will get 3 boxes in a row.

To switch to two boxes at a lower resolution, you should use the class: col-sm-6 With the grid of 12 columns you will then be able to position 2 boxes.

For a box by column on even smaller screens (cell phones for example) you should use the class: col-xs-12 With this indicating that you want to occupy the 12 columns of the grid and therefore one box per line.

You can better understand this at the following link: link Navigating to the "grid options" section.

I hope I have helped.

Good luck!

03.10.2015 / 08:05

Implementation of classes in the header itself Adding text box and saving to the bank. (with C #, entityframework 6.1.3)

score 2 · Accepted Answer

You should work with the col-x-y classes of the bootstrap.

For example, if you want them to behave differently at different resolutions do so:

<div class="col-sx-6 col-sm-4 col-md-3 col-lg-3">

And put everything into a single class = 'row'