CODEWITHSUNDEEP
htmlcssbootstrap-4
Paula
Paula

Reputation: 399

How do I align elements horizontally?

I have three elements (DIVs) and I need to align them horizontally. I'm following Bootstrap's guides and it won't work.

This is what I need it to look like: enter image description here

This is what it looks now, it's aligned to the left: enter image description here

Here's my code:

.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
 }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="row m-0">
  <div class="col-12 product-info-subtitle cuanto-pagar">
    <p>¿Cuánto quieres pagar?</p>
  </div>
  <div class="col-12">
    <div class="row justify-content-center">
      <div class="col-3 price-selection text-center">
        <p class="price">one</p>
        <p class="period">one</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">two</p>
        <p class="period">two</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">three</p>
        <p class="period">three</p>
      </div>
    </div>
  </div>       
</div>

Upvotes: 1

Views: 99

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19672

Use m-0 for remove horizontal bar.

Columns should not be direct children of other columns. If you want to divide a column use a .row wrapper.

Solution 1

I removed justify-content-center because it cant give gap between cols, so use justify-content-around. 

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="row m-0 justify-content-around element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>

Solution 2

you can also use CSS for equally gap between cols ( no bootstrap class for space-evenly ).

.element {     
    justify-content: space-evenly;
}


.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
}
.element {     
    justify-content: space-evenly;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="row m-0 element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>

Upvotes: 1

tao
tao

Reputation: 90287

Here's the correct markup for what you're trying to achieve:

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}
<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-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-around">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

The important part is: i wrapped the col's in a row which has the class of justify-content-around.

The row part fixes the margin/paddings of Bootstrap grid on various screen sizes.

The justify-content-around gives it justify-content: space-evenly. Currently Bootstrap only has justify-content-around and justify-content-between. However, since it was released, flexbox was added a new value for justify-content (which will probably get added to Bootstrap), which is space-evenly. However, Bootstrap doesn't yet have a class for it.

If you want to space your elements evenly, you'll need to add it in CSS yourself:

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}
.justify-content-evenly {
  display: flex;
  justify-content: space-evenly;
}
<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-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-evenly">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

To better understand the difference between various types of spacing in flexbox, here's a graphical explanation: https://css-tricks.com/almanac/properties/j/justify-content/#article-header-id-1

Upvotes: 2

Related Questions