Bootstrap 4 align text right

Question

I am using the original bootstrap CSS, but with this code, my text doesn't align left and right. They are just next to each other instead.

.text-left {
    text-align: left!important
}
.text-right {
    text-align: right!important
}

<div class="cart_row">
    <span class="text-left">Price</span> 
    <span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

What am I doing wrong?

You do not close posts. You accept the answer that solves your problem. If you have found the solution before anyone else did, you are able to post your own answer so the others that stumble upon the question will know the correct solution. — Mahatmasamatman, Feb 25 '20 at 11:57
a span is an inline element and as such text align will not work on it (as the element is the size of the text unless it wraps) Instead you want to either make your elements block and take up 50% width each (to apply those classes) or just make the parent flex with justify content space between — Pete, Feb 25 '20 at 12:59

score 0 · Answer 1 · answered Feb 25 '20 at 11:36

0

span is inline elements.

Use class float-right.

<div class="cart_row">
  <span>Price</span>
  <span class="float-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

Check the live code here: https://codepen.io/manaskhandelwal1/pen/GRJrebW

answered Feb 25 '20 at 11:36

Manas Khandelwal

3,790
2
11
24

score 0 · Answer 2 · answered Feb 25 '20 at 11:51

You need to get the gist of css-bootstrap (Grid System with rows and width)

The .pull-left class is used to float the element to the left The .pull-right class is used to float the element to the right

Create a row with given width, then create 2 inner sections with width separated between them.

Source: Quick floats

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html> 
<html> 

<head> 

 <!-- Include Bootstrap CSS -->
 <link rel="stylesheet"
  href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
</head> 

<body> 
<div class="row col-md-12">
 <div class="col-md-3">
    <span class="pull-left bg-success">left test1</span> 
    <span class="pull-right bg-warning">right test1</span>
 </div> 
 <div class="col-md-3">
    <span class="pull-left bg-info">left test2</span> 
    <span class="pull-right bg-danger">right test3</span>
 </div>
 
</div>
</body> 

</html>

score 0 · Accepted Answer · answered Feb 25 '20 at 11:57

You can use it by using its flex classes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="cart_row d-flex justify-content-between">
    <span class="text-left">Price</span> 
    <span class="text-right"><?php echo int_to_format($price); ?> Ft,-</span>
</div>

Bootstrap 4 align text right

3 Answers3