By divs next to bootstrap

Question

By divs next to bootstrap

Navigation

#1 by (5 votes)

4

I have 5 divs, I want them aligned on the same line ... However the div div is not aligned ...

<section class="content">

  <div class="row">
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>


    <div class="  col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>

      <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>

      <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>


  </div>


  <div class="row">
    <div class="col-xs-2 col-xs-offset-1">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    <div class="col-xs-2 col-xs-offset-2">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    <div class="col-xs-2 col-xs-offset-2">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
  </div>



  <div class="row">

    <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>

     <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div> 

    <div class="col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" torreDiv col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" torreDiv col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>

  </div>

</section>

html css tags grid responsivo

asked by anonymous 04.12.2018 / 03:49

1 answer

How to validate start date and end date for a same attribute of Model When to use these commands?

score 5 · Answer 1

You can get the .row from the middle and put a .centro class in it. Then, you% w% of it puts it "floating" over the others, and aligns it vertically with composition:absolute and top

Seethecodefortheimageabove:

.content {
    position: relative;
}

.centro {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    margin: auto;
}

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

<section class="content">

    <div class="row">
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>


        <div class="  col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>


    </div>


    <div class="row centro">
        <div class="col-xs-2 col-xs-offset-1">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class="col-xs-2 col-xs-offset-2">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class="col-xs-2 col-xs-offset-2">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
    </div>



    <div class="row">

        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class="col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" torreDiv col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" torreDiv col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

    </div>

</section>