Align divs with bootstrap

1

I want to start aligning several divs to the right of the large container but as they are aligned this happens to me. Let's see if you can pull a cable.

The code for the containers is as follows:

  

Bootstrap code blocks

        <div class="row" style="background-color:transparent well">

        <div id="contenedorizda-gl" class="col-12 col-sm-12 col-md-12 col-xl-8 mt-3 mb-3">

        <h1>Contenedor Global Izq</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque mauris dolor, et consectetur turpis laoreet nec. Donec consectetur nulla vitae neque cursus lacinia. Cras a libero dolor. Aliquam vitae massa felis. Praesent diam risus, vestibulum vel leo sit amet, egestas imperdiet velit. Duis euismod velit at scelerisque tincidunt. Vestibulum mollis id neque ut pretium. Aenean condimentum lorem sem, eu pellentesque orci sodales vitae.</p>

        </div>

        <div id="contenedordcha-gl" class="col-12 col-sm-12 col-md-12 col-xl-3 offset-xl-1 center-block mt-3 mb-3"><h1>Contenedor Global Dcha</h1></div>

        <div id="contenedordcha-gl" class="col-12 col-sm-12 col-md-12 col-xl-3 offset-xl-9 center-block mb-3"><h1>Contenedor Global Dcha</h1></div>


    </div>


</div>
    
asked by Aitor Sola 05.10.2018 в 11:50
source

1 answer

0

What I did was to place a higher level, that is, place two main columns that occupy 50%, that is, two of col-6 each and to the left place the large block and to the right place the other two small ones:

div[class^="col-"]{
 border:1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">     
     
<div class="container">     
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

I hope it's what you're looking for.

    
answered by 05.10.2018 / 12:26
source