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

Question

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>

marcus.salinas · Answer 1 · 2022-03-06T15:06:45.960

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/bootstrap@4.0.0/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/bootstrap@4.0.0/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/bootstrap@4.0.0/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>

score 1 · Answer 2 · answered Jan 13 '23 at 03:04

You can use 'justify-content-between' along with 'column-auto' class for this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<body>
    <div class="container">
        <div class="row d-flex justify-content-between">
            <div class="col-auto"></div>
            <div class="col-auto">App</div>
            <div class="col-auto">FAQ</div>
        </div>
</body>
</html>

isherwood · Accepted Answer · 2021-02-16T13:54:18.107

The concepts are all outlined in generic terms in answers to this SO question. Here's what I'd probably do:

Use Bootstrap's flexbox utilities instead of custom styles
Create a dummy first list item and hide it from screen readers for better accessibility. It must contain the same content to match sizing, but the content can be visually hidden.

I'll also note that your layout misuses rows and columns. Always stick to the standards with Bootstrap, for your sanity and that of others:

container
  row
    column
      row
        column

ul {
    padding: 0; /* reset browser defaults */
    background: #ddd; /* demo only */
}

li {
    padding: 0 4px;
    background: pink; /* demo only */
}

li.layout-dummy {
    color: transparent; /* visually hide; could also use visibility: hidden */
}

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

<ul class="d-flex justify-content-between" style="list-style:none;">
  <li aria-hidden="true" class="layout-dummy">FAQ</li>
  <li>App</li>
  <li>FAQ</li>
</ul>

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

3 Answers3