CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
xgmexgme
xgmexgme

Reputation: 139

How to make Bootstrap columns right aligned?

Disclaimer: I'm not a Bootstrap to CSS expert some of the terms I use in this question might be different, feel free to comment so I can adjust it.

Based on Bootstrap's Grid System, rows contain cols that are left aligned: behaves like float: left. Is there a way to make them right aligned? I tried adding inline float: right styles but it didn't work.

For more details here's what I'm trying to achieve. I have 2 columns (colA and colB). On wide screens (e.g. laptops) I want to show colA on the left and colB on the right. Thanks to Bootstrap, when the screen is small enough, colA shows up on top of colB which is great.

In my case, I'm trying to show colB on top of colA on mobile (or small screens) while still keeping it on the right for wide screens. Is there a way to do this?

Upvotes: 0

Views: 3098

Answers (2)

gugateider
gugateider

Reputation: 2057

What you need is the Order utility as well as justify-content-end

As you can see in the example below the row is display block on small screens but then becomes flex on sm breakpoints.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="d-block flex-nowrap justify-content-end d-sm-flex">
  <div class="order-2 p-2">First flex item</div>
  <div class="order-1 p-2">Second flex item</div>
</div>

Upvotes: 2

z-Amiryan
z-Amiryan

Reputation: 1

Try float-right

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

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

Upvotes: -1

Related Questions