0

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?

xgmexgme
  • 132
  • 7

2 Answers2

2

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>
gugateider
  • 1,983
  • 2
  • 13
  • 17
  • Thanks a lot! This is exactly what I was looking for. Also to be compatible with the grid system, I made the following modifications, feel free to edit your answer: ``` lang-html
    First flex item
    Second flex item
    ```     – xgmexgme Feb 09 '21 at 21:33
  • I don't know why formatting doesn't work, but hopefully after copy/pasting this, you can se e the minimal modification I made – xgmexgme Feb 09 '21 at 21:37
0

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>
z-Amiryan
  • 1