Grid Alignment Bootstrap

Question

Grid Alignment Bootstrap

Navigation

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

1

I have 3 images, they are aligned correctly, but from the resolution of the print below they start to appear one below the other, even though they have space to be displayed at most next to each other and the third below. I do not know if I understood myself, but I'm trying to get a behavior like this template here: link

As mine is:

HTML:

<sectionclass="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

asked by anonymous 16.05.2017 / 20:03

2 answers

2

You need to add the col-md-4 col-sm-6 col-xs-12 classes in the columns and the img-responsive class 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><scriptsrc="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 the size 800x600 to fill the entire screen on smaller devices.

SEE THE EXAMPLE AT JSFIDDLE

16.05.2017 / 23:00

Query the database through a text box Complete Regressive Chronometer in Pure JS - Problem Counting

score 2 · Accepted Answer

I tried on my machine and it worked now, maybe it is the spacing between the tags, try to disable the browser cache too, if it has in the chrome in the Network tab, enable the Disable Cache option.

  

<!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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

If you want two columns as long as you have 768px to 992px add col-sm-6 that resolves, take a test too!