Bootstrap (col-md-6) Failed to align elements

Question

Bootstrap (col-md-6) Failed to align elements

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm trying to make a blog for the first time in bootstrap, but I can not align the elements well

Example:

But the problem I have is that the text comes out like this:

This is the code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="row" style="margin: 0; padding-top: 20px; padding-bottom: 20px;">
    <div class="col-md-6">
      <img src="https://www.indigovision.com/wp-content/uploads/management-hardware-header.jpg" alt="" width="100%">
    </div>
    <div class="col-md-6" style="text-align: center">
      <h1>Hardware</h1>
    </div>
    <div class="col-md-6">
      <p>Es la parte física de un ordenador, es decir la que podemos ver y tocar, en ella encontramos periféricos como ratón, teclado, pantalla, aparte de la caja del ordenador la cual esta compuesta por la fuente de alimentación, disquetes, disco duro,
        placa base (memorias RAM, ROM, CPU(UAL, UC Y UNIDAD DE REGISTRO)), procesador… </p>
    </div>
  </div>

  </div

Note: To see the code well, execute it in full screen


I also accept alternatives to bootstrap

html bootstrap

asked by Ruben-PX 27.12.2018 в 23:04

source

3 answers

How to simulate a C struct in Python how to add 2 properties of 2 different objects in js (nodejs)

score 3 · Answer 1

The problem is that you are declaring 3 divisions of 6 columns, the bootstrap grid uses 12 so when you put 3 are 18, it shows you two aligned and the third one pulls it down. To solve it you create two of 6, in the first you put the image and in the second the title plus the information

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="row" style="margin: 0; padding-top: 20px; padding-bottom: 20px;">
<div class="col-md-6">
  <img src="https://www.indigovision.com/wp-content/uploads/management-hardware-header.jpg" alt="" width="100%">
</div>
<div class="col-md-6" style="text-align: center">
  <h1>Hardware</h1>
  <br>
        <p>Es la parte física de un ordenador, es decir la que podemos ver y tocar, en ella encontramos periféricos como ratón, teclado, pantalla, aparte de la caja del ordenador la cual esta compuesta por la fuente de alimentación, disquetes, disco duro,
    placa base (memorias RAM, ROM, CPU(UAL, UC Y UNIDAD DE REGISTRO)), procesador… </p>
</div>
  </div>

  </div>

WHEN YOU EXECUTE THE SNIPPET APRIL AS A COMPLETE SCREEN SO YOU SEE IT WELL

Always keep in mind that the grid is 12, other things you can do is that when you declare the size of your column it can be divided internally into 12 again eg:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
   <div class="col-md-6" style="border: 1px solid #000000;">
      Columna 1
    </div>
    <div class="col-md-6" style="border: 1px solid #000000;">
      Columna 2
        <div class="row">
          <div class="col-md-4" style="border: 1px solid #000000;">Sub Columna 1</div>
          <div class="col-md-4" style="border: 1px solid #000000;">Sub Columna 2</div>
          <div class="col-md-4" style="border: 1px solid #000000;">Sub Columna 3</div>
        </div>
    </div> 
  </div>
</div>

score 0 · Answer 2

I have added a new row in the middle of the right side that in the main container would be half and I have put a col-md-12 to the text and title.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="row"> 
<div class="row" style="margin: 0; padding-top: 20px; padding-bottom: 20px;"> 
<div class="col-md-6"> 
<img src="https://www.indigovision.com/wp-content/uploads/management-hardware-header.jpg" alt="" width="100%"> 
</div> 
 <div class="col-md-6"> 
<div class="row>
<div class="col-md-12" style="text-align: center"> 
<h1>Hardware</h1> 
</div> 
<div class="col-md-12"> 
<p>Es la parte física de un ordenador, es decir la que podemos ver y tocar, en ella encontramos periféricos como ratón, teclado, pantalla, aparte de la caja del ordenador la cual esta compuesta por la fuente de alimentación, disquetes, disco duro, placa base (memorias RAM, ROM, CPU(UAL, UC Y UNIDAD DE REGISTRO)), procesador… 
</p> 
</div> 
</div>
</div> 
</div> 
</div>

Do not touch the rest as the unnecessary row in case you have any reason.

score 0 · Answer 3

Test - > .row { display: flex; flex-direction: row; } #column { display: flex; flex-direction: column; }

    <div class="row">

        <div class="row" style="margin: 0; padding-top: 20px; padding-bottom: 20px;">
              <div class="col-md-6">
                <img src="https://www.indigovision.com/wp-content/uploads/management-hardware-header.jpg" alt="" width="100%">
              </div>
              <!--crear un div para ponerlo en columna-->
            <div id="columna">
                <div class="col-md-6" style="text-align: center">
                    <h1>Hardware</h1>
                </div>
                <div class="col-md-6">
                    <p>Es la parte física de un ordenador, es decir la que podemos ver y tocar, en ella encontramos periféricos como ratón, teclado, pantalla, aparte de la caja del ordenador la cual esta compuesta por la fuente de alimentación, disquetes, disco duro,
                    placa base (memorias RAM, ROM, CPU(UAL, UC Y UNIDAD DE REGISTRO)), procesador… </p>
                </div>
            </div>
        </div>

    </div>