Search code examples
bootstrap-4

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 enter image description here

<!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>

Solution

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

    1. Use Bootstrap's flexbox utilities instead of custom styles
    2. 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>