Alignment issue with Bootstrap Nav & Flexbox Items at either end

user_10626441 0
Viewed 48

I'm having difficulty moving items on my Navbar to either end. At the moment I have this: Navbar issue

I would like to move the flag image next to the toggler button, it is only there when the breakpoint reaches the Navbar button size, 992px.

I'm sure the Bootstrap Stylesheet is aligning it using justify-content: space-between; I have tried using align-self: flex-end !important; on both flag and button as well as using justify-content-end

Codepen - https://codepen.io/jvern22/pen/gZjJBN

My Nav code; 

  <div class="container container-navbar">

    <a class="navbar-brand" href="index.php">Website title</a>
    <a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="top-navbar-1">
      <ul class="navbar-nav justify-content-end">            
        <li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
        <li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
      </ul>
    </div>        

  </div>
</nav>
bootstrap-4 twitter-bootstrap css html
2 Answers

You can either wrap the flag and the navbar button within a div as shown in this CodePen or in the Code Snippet below:

html {
  height:100%;
  box-sizing: border-box;
}

body {
  min-height:100%; 
  padding:0; 
  margin:0; 
  position:relative;
  font: 400 15px "Open Sans", sans-serif;
 line-height: 30px;
  text-align: center;
  overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}

.bg-dark {
  background: #000 !important;
  color: #fff;
}

.bg-dark a {
  color: #aaa;
}

.bg-dark a:hover, .bg-dark a:focus {
  color: #fff;
}

.navbar-nav>li>a {
 line-height: 20px;
  padding-right: 12px!important;
  padding-left: 12px!important;
  padding-top: 10px!important;
  padding-bottom: 10px!important;
}

.navbar-flag {
  height: 20px;
}

@media (min-width: 992px) and (max-width: 2200px){

  .navbar-flag {
    display: none;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
    
      <div class="container container-navbar">     
        <a class="navbar-brand" href="index.php">Website title</a>
        
        <div>
          <a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="top-navbar-1">
          <ul class="navbar-nav justify-content-end">            
            <li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>

          </ul>
        </div>        
        
      </div>
    </nav>

Or you can just change the justify-content property of the parent div from space-between to flex-end and add a margin-right: auto to the first navbar-brand as shown in this CodePen or in the Code Snippet below:

html {
  height:100%;
  box-sizing: border-box;
}

body {
  min-height:100%; 
  padding:0; 
  margin:0; 
  position:relative;
  font: 400 15px "Open Sans", sans-serif;
 line-height: 30px;
  text-align: center;
  overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
    margin-right: auto;
}
.bg-dark {
  background: #000 !important;
  color: #fff;
}

.bg-dark a {
  color: #aaa;
}

.bg-dark a:hover, .bg-dark a:focus {
  color: #fff;
}

.navbar-nav>li>a {
 line-height: 20px;
  padding-right: 12px!important;
  padding-left: 12px!important;
  padding-top: 10px!important;
  padding-bottom: 10px!important;
}

.navbar-flag {
  height: 20px;
}

@media (min-width: 992px) and (max-width: 2200px){

  .navbar-flag {
    display: none;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
        <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
    
      <div class="container container-navbar">
      
        <a class="navbar-brand" href="index.php">Website title</a>
        <a class="navbar-brand justify-content-end" href="#"><img src="
          https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="top-navbar-1">
          <ul class="navbar-nav justify-content-end">            
            <li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
            <li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>

          </ul>
        </div>        
        
      </div>
    </nav>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

user_41149070

The easiest solution here is to just expand the first flex item so that it pushes all the other items to the right. This can be easily done by adding the following to your css:

.navbar-brand:first {
  flex-grow: 1;
}
user_108907560
Related