Alignment of Bootstrap grid

Asked

Viewed 1,661 times

1

I have 3 images, they are aligned neatly, but from the resolution of the print below they begin to be displayed one below the other even having space to be displayed, at most, one next to the other and the third below. I don’t know if I made myself clear, but I’m trying to pursue a behavior like this template here: http://www.uipasta.com/wordpress-preview/rolling/

As mine is: inserir a descrição da imagem aqui

HTML:

<section class="container" id="portfolio">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="">Portfólio</h1>
                <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
            </div>
        </div>
        <div class="row ">
           <div class="col-md-4  col-sm-4  col-xs-12">
             <figure>
               <img src="img/hidrau.png" alt="Hidraurio Mangueiras Hidraulicas">
               <figcaption>
               <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
               <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
               </figcaption>
             </figure>
           </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
          <figure>
            <img src="img/gescolar.png" alt="Sistema de Gestão Escolar">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
          <figure>
            <img src="img/gescolar.png" alt="Sistema de Gestão Escolar">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
     </div>
      </section>
html css twitter-bootstrap

  • Tiago put the excerpt of your code also to get a easier help, what you need to do there is to put the class in those three items that when you get below 800px these elements are with width:100%; (that would be col-Xs-12). You only need to check now if your classes will not conflict with this.

  • Opa @italoDrago, I put the code and tried the col-Xs-12 but continued the same thing :/

  • your image is at width:100%? because if it won’t take up all the space because of the figcaption tag that Oce placed. Change the class col-Sm-4 by col-Sm-6 also, that there the structure in general is equal to the example sent.

  • @italodrago, put the col-Sm-6 and solved part of the "problem" now if I add a col-Xs-somemnúmero, it no longer shows the elements one below the other, if I do not put any col-Xs it solves only until a certain resolution.

2 answers

2


I tested it on my machine and it worked now, maybe it is the spacing between the tags, try to disable the browser cache too, if you have in Chrome in the Network tab enables the option Disable Cache.

  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

  <section class="container" id="portfolio">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1 class="">Portfólio</h1>
        <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
      </div>
    </div>

    <div class="row text-center">
      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Hidraurio Mangueiras Hidraulicas">
          <figcaption>
            <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Sistema de Gestão Escolar">
          <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
        <figure>
          <img src="http://www.ibra.com.br/wp-content/uploads/2014/05/ref_planta_crescendo.png" alt="Sistema de Gestão Escolar">
          <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
          </figcaption>
        </figure>
      </div>
    </div>

  </section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

If you want two columns when you have 768px to 992px add col-Sm-6 that solves, do a test too !

2

You need to add the classes col-md-4 col-sm-6 col-xs-12 in the columns and the class img-responsive in the images, I see an example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="container" id="portfolio">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="">Portfólio</h1>
                <h3 class="subtitle">Alguns do meus trabalhos voltados para Web</h3>
            </div>
        </div>
        <div class="row ">
           <div class="col-md-4  col-sm-6  col-xs-12">
             <figure>
               <img src="http://placehold.it/800x600" alt="Hidraurio Mangueiras Hidraulicas" class="img-responsive">
               <figcaption>
               <a href="http://hidrauriomangueiras.com.br" target="_blank"><button >Visitar</button></a>
               <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button >Github</button></a>
               </figcaption>
             </figure>
           </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <figure>
            <img src="http://placehold.it/800x600" alt="Sistema de Gestão Escolar" class="img-responsive">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <figure>
            <img src="http://placehold.it/800x600" alt="Sistema de Gestão Escolar" class="img-responsive">
            <figcaption>
            <a href="http://tiagotestes.esy.es/Gescolar" target="_blank"><button >Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/gescolar" target="_blank"><button >Github</button></a>
            </figcaption>
          </figure>
        </div>
     </div>
      </section>

NOTE: In the example I used the images in size 800x600 to occupy the entire screen on smaller devices.

SEE EXAMPLE IN JSFIDDLE

  • 1

    So apparently the problem is the size of my images, because they’re 350x300??

Browser other questions tagged html css twitter-bootstrap

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