What is the best way to position elements in a horizontal line?

Question

What is the best way to position elements in a horizontal line?

I am trying to align three elements (DIVs) horizontally using Bootstrap's guidelines, but it doesn't seem to be working.

This is the desired layout: https://i.sstatic.net/7lPKU.png

However, this is what it currently looks like, aligned to the left: https://i.sstatic.net/v1Rzu.png

Here is the code I have been using:

.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>

html css bootstrap-4

Answer 1

Answer №1

Below is the accurate markup for achieving your desired result:

.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>How much do you want to pay?</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 key aspect here is that I enclosed the col elements within a row with the class of justify-content-around.

The inclusion of the row class resolves any margin or padding issues related to Bootstrap grid on different screen sizes.

The use of justify-content-around provides the functionality equivalent to justify-content: space-evenly. While Bootstrap currently supports only justify-content-around and justify-content-between, flexbox introduced a new value, space-evenly, which might be incorporated into Bootstrap in the future.

If you wish to evenly space your elements, you can add this CSS class manually:

.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>How much do you want to pay?</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 distinctions between various spacing methods in flexbox, refer to this visual guide: https://css-tricks.com/almanac/properties/j/justify-content/#article-header-id-1

Answer 2

Below is the accurate markup for achieving your desired result:

.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>How much do you want to pay?</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 key aspect here is that I enclosed the col elements within a row with the class of justify-content-around.

The inclusion of the row class resolves any margin or padding issues related to Bootstrap grid on different screen sizes.

The use of justify-content-around provides the functionality equivalent to justify-content: space-evenly. While Bootstrap currently supports only justify-content-around and justify-content-between, flexbox introduced a new value, space-evenly, which might be incorporated into Bootstrap in the future.

If you wish to evenly space your elements, you can add this CSS class manually:

.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>How much do you want to pay?</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 distinctions between various spacing methods in flexbox, refer to this visual guide: https://css-tricks.com/almanac/properties/j/justify-content/#article-header-id-1

Answer 3

Answer №2

When removing the horizontal bar, use m-0.

Avoid making columns direct children of other columns. Instead, use a .row wrapper to divide columns.

Solution 1

To create gaps between columns, replace justify-content-center with 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

If you want equal gaps between columns without using Bootstrap classes like space-evenly, you can achieve this with CSS:

.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>

Answer 4

When removing the horizontal bar, use m-0.

Avoid making columns direct children of other columns. Instead, use a .row wrapper to divide columns.

Solution 1

To create gaps between columns, replace justify-content-center with 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

If you want equal gaps between columns without using Bootstrap classes like space-evenly, you can achieve this with CSS:

.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>

What is the best way to position elements in a horizontal line?

Answer №1

Answer №2

Similar questions

Synchronized scrolling and equal height for multiple divs

Establishing a PHP session variable and then initiating a redirect to a new page through the HREF method

Exploring AngularJS: Implementing CSS media query for responsive screen resizing

Struggling to retrieve the image URL from a TypeScript file

The collision function is currently not functioning properly, causing a hindrance in movement. There are no other codes restricting movement

Is there a way to add a class (1) when scrolling to a specific div, and then switch from class (1) to class (2) when moving away from the

How to use CSS to dynamically adjust the maximum width of an overflow container based on its children's content

Steps for implementing a Toggle Navigation Bar in CSS

Automatically pre-fill and send hidden form

What is the best way to make my a tag background appear above my div background?

Changing the class of a div element in a jQuery array or JSON object with a click event

Exploring reviews with an innovative combination of Node.js and MongoDB

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

Unveiling the Secret: Empowering a Span to Secure its Territory Amidst an Adv

Guide to resetting a CSS animation with pure JavaScript

I'm struggling to get the checkbox to transmit correctly. Every time I hit submit, it consistently shows as unchecked in the database

Joomla website layout using Bootstrap columns set to MD-6 but not contained within a single

Obtaining the class value using the getAttribute function

Display a progress bar in an application to visualize the loading of database records

Customizing the size of the selectInput widget in R/Shiny