'How can I align one item right and keep one centered with Bootstrap 4?

I have the following html using bootstrap4: I am trying to overlap two rows using z-index.

        <div class="col-12">
            <div class="row justify-content-center align-items-center p-4" style="z-index:30;position:relative">
                <div>
                    App
                </div>
            </div>
            <div class="row justify-content-end align-items-center p-4" style="z-index:50;position:relative">
                <div>
                   FAQ
                </div>
            </div>
        </div>

The below image shows what i am getting:

what i am getting is

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
        <div class="col-12">
            <div class="row justify-content-center align-items-center p-4" style="z-index:30;position:relative">
                <div>
                    App
                </div>
            </div>
            <div class="row justify-content-end align-items-center p-4" style="z-index:50;position:relative">
                <div>
                   FAQ
                </div>
            </div>
        </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   
  </body>
</html>

bootstrap-4

Solution 1:^[1]

This one rattled my brain too and honestly I still am not sure how this makes sense, but in this case we can use this document

So we can see that we can flex the items to the end and then build from there

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-end">
  <div class="col-4">
    App
  </div>
  <div class="col-4">
    FAQ
  </div>
</div>

That will give us a column with the center and at the end. Then we can use the d-flex properties to move around those two items as we see fit. In your case,

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-end">
  <div class="col-4 d-flex justify-content-center">
    App
  </div>
  <div class="col-4 d-flex justify-content-end">
    FAQ
  </div>
</div>

And we can clean it up further by adding some padding

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-end p-2">
  <div class="col-4 d-flex justify-content-center">
    App
  </div>
  <div class="col-4 d-flex justify-content-end">
    FAQ
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How can I align one item right and keep one centered with Bootstrap 4?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]