How to align images responsibly with bootstrap

Question

How to align images responsibly with bootstrap

Asked 9 years ago

Viewed 1,763 times

3

I am using the bootstrap and my goal is to make some boxes fluid that are grouped in rows of 4. When I change the screen size I want the boxes to decrease ( I got it) but when I reach a certain point, I want them to line up two by two and finally one in each row. The problem is that they just go to one in each row getting bad on the screen. I want something like this site: http://www.ticketbis.com.pt/

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>
    <script src="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\9;
    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% \9;
}

*/

@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.

2 answers

2

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

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

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

And put it all in one class='Row'

More information http://getbootstrap.com/css/#grid

Yes, that’s right, @Erickgallani. Thank you very much.

– Paulo Frutuoso

2015/09/17 at 11:29

Browser other questions tagged twitter-bootstrap image responsive-layout

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

by Márcio Ricardo • 75 points · Answer 1 · 2015-10-03T06:05:11+00:00

Is the following Paul:

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

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

For a box per column on even smaller screens (mobile phones for example) you must 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 row.

You can better understand this in the following link: http://getbootstrap.com/css/ Navigating to the "grid options section".

I hope I’ve helped.

Good luck!