bootstrap justify-content-end

Bootstrap justify-content-end not working as expected

stackoverflow.com › questions › 61174994 › bootstrap-justify-content-end-not-working-as-expected

The class needs to be applied on the parent, which is <nav>

Edit: Since there is more content inside the nav, the justify-content-end class would not work as intended. You need to use ml-auto

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <h1>H1 tag</h1>
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

Answer from Anurag Srivastava on Stack Overflow

Bootstrap

getbootstrap.com › docs › 4.0 › utilities › flex

Flex · Bootstrap

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

Bootstrap

getbootstrap.com › docs › 5.0 › utilities › flex

Flex · Bootstrap v5.0

Videos

youtube.com

Justify Content Bootstrap 5 | Center Content using Bootstrap 5 ...

February 3, 2023

12:55

YouTube

Justying Content with Rows & Cols // A Bootstrap 5 Responsive Flex ...

Using Flexbox in Bootstrap and Centering Elements - YouTube

Bootstrap Flex Item Classes - Bootstrap5 Tutorial 25 🚀 - YouTube

November 28, 2022

fructcode.com

Bootstrap 4 - Flex позиционирование justify-content ...

50:27

YouTube

Bootstrap d flex justify content align items - YouTube

July 23, 2024

View all

Bootstrap Shuffle

bootstrapshuffle.com › classes › flexbox › justify-content-*-end

justify-content-*-end - Bootstrap CSS class

<div class="d-flex justify-content-end"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div>  <div class="d-flex justify-content-sm-end">...</div> <div class="d-flex justify-content-md-end">...</div> <div class="d-flex justify-content-lg-end">...</div> <div class="d-flex justify-content-xl-end">...</div>Copy code ... You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

W3Schools

w3schools.com › bootstrap4 › bootstrap_flex.asp

Bootstrap 4 Flex

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:

GeeksforGeeks

geeksforgeeks.org › bootstrap › bootstrap-5-flex-justify-content

Bootstrap 5 Flex Justify Content - GeeksforGeeks

April 10, 2024 - Example 1: In this example, we change the alignment of the elements on the main axis using justify-content-start and justify-content-end classes. ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> </script> </head> <body> <div class="container text-center "> <h1 class=

Bootstrap

getbootstrap.com › docs › 4.6 › utilities › flex

Flex · Bootstrap v4.6

Stack Overflow

stackoverflow.com › questions › 61174994 › bootstrap-justify-content-end-not-working-as-expected

html - Bootstrap justify-content-end not working as expected - Stack Overflow

Top answer

1 of 7

The class needs to be applied on the parent, which is <nav>

Edit: Since there is more content inside the nav, the justify-content-end class would not work as intended. You need to use ml-auto

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light col-12">
    <h1>H1 tag</h1>
    <ul class="nav ml-auto">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

2 of 7

Assuming you're trying to align the nav on the right end of the navbar, it would be:

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</nav>

https://codeply.com/p/u2Xl8bTym0

TutorialsPoint

tutorialspoint.com › Bootstrap-4-justify-content-end-class

Bootstrap 4 .justify-content-*-end class

BootstrapWeb DevelopmentCSS Framework · To justify the flex items on the end, use the justify-content-end class. To justify the flex items on the end, on different screen sizes, use the justify-content-*-end class. The flex items justified at the end would be visible like the following on ...

Find elsewhere

Google Bing Mojeek

Shuffle

shuffle.dev › bootstrap › classes › flexbox › justify-content-end

Bootstrap CSS class: justify-content-end - Shuffle

Bootstrap CSS class justify-content-end with source code and live preview. You can copy the example and paste it into your project or use the Shuffle editor and not write code by hand!

FastBootstrap

fastbootstrap.com › docs › justify-content

Bootstrap Justify Content CSS - FastBootstrap

Stack Overflow

stackoverflow.com › questions › 65782234 › bootstrap-columns-and-justify-content-end

html - Bootstrap columns and justify-content-end - Stack Overflow

Top answer

1 of 2

I have changed your code a little to get the desired effect.

On <div class="row"> i removed some unneeded styles. and on the <div class="col"> i changed it to col-4 to set the width. Since bootstrap works in a frame of 12. 4 + 4 leaves 4 short so thats the space thats being filled with justify-content-between. I also deleted your css since it was not needed.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body class="d-flex flex-column min-vh-100">
  <!-- -->
  <nav class="navbar navbar-light navbar-expand-md bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="img/logo.svg" alt="">
      </a>
      <!-- -->
      <div class="navbar-nav d-none d-md-flex">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">A</a>
        <a class="nav-link" href="#">B</a>
        <a class="nav-link" href="#">C</a>
        <a class="nav-link" href="#">D</a>
        <a class="nav-link" href="#">E</a>
      </div>
      <!-- -->
      <span>
        <a href="https://twitter.com/" rel="nofollow noopener noreferrer"><i
            class="fab fa-twitter mx-2 gstwitterblue"></i></a>
        <a href="https://www.linkedin.com/"
          rel="nofollow noopener noreferrer"><i class="fab fa-linkedin mx-2 gslinkedinblue"></i></a>
      </span>
    </div>
  </nav>
  <main class="flex-fill">
     <div class="container d-none d-md-flex flex-md-row">
      <div class="row justify-content-between">
        <div class="col-4">
          <div class="card">
            <div class="ratio ratio-16x9">
              <iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
            </div>
            <div class="card-body">
              <p class="card-text">

               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae.</p>
            </div>
          </div>
        </div>
      <div class="col-4">
        <div class="card gscustomwidth">
          <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube-nocookie.com/embed/wm48_VrbB4Q?rel=0" allowfullscreen></iframe>
          </div>
          <div class="card-body">
            <p class="card-text">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur orci malesuada sem lacinia, vitae tempor tellus auctor. Sed elementum iaculis quam ac consectetur. Nam ac laoreet est, ut placerat arcu. Ut viverra, quam vitae gravida ornare, arcu felis elementum elit, a pulvinar lacus augue ac nisl. Nunc tincidunt ultricies luctus. Donec et congue ex. Curabitur lacinia scelerisque imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ultricies, mauris at ultricies dapibus, urna nisl ullamcorper libero, ac dictum ex neque sed ante. Pellentesque luctus nibh libero, consequat vulputate eros porttitor vitae. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
    </main>
  <!-- Standard Footer -->
  <footer class="bg-light py-3 d-none d-md-flex">
    <div class="container d-flex justify-content-between">
      <span class="text-dark fw-lighter">Copyright  2020 Foobar Ltd. All rights reserved.</span>
      <span class="text-dark fw-lighter"><a href="#" class="text-reset text-decoration-none">Legal
          Information</a></span>
    </div>
  </footer>
  </body>

2 of 2

The reason what you want doesn't happen is because you're not giving the row div a full width. From your code, add w-100 to the following div:

<div class="row row-cols-1 row-cols-md-2 justify-content-between">

Stack Overflow

stackoverflow.com › questions › 60736539 › justify-content-start-and-end-in-bootstrap-4-with-flex

html - Justify content start and end in bootstrap 4 with flex - Stack Overflow

Top answer

1 of 1

You can justify-content- on your row. Place your cols right after the row, and avoid having extra divs (<div class="header_mobile_box">) in between. You can place it before the row if you need it for styling purposes. Please refer to Bootstrap's Horizontal Alignment.

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div class="header_mobile">
    <div class="container">
      <div class="row justify-content-between">
        <div class="col-4">
          Left side
        </div>
        <div class="col-4">
          Right side
        </div>
      </div>
    </div>
  </div>
</body>

Stack Overflow

stackoverflow.com › questions › 49840369 › justify-content-for-different-break-points-bootstrap-4

Justify Content for different break points Bootstrap 4 - Stack Overflow

Top answer

1 of 1

To position the content of the column div you can use the responsive versions of justify-content-* class with d-flex

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

Just add the classes d-flex to display flex and justify-content-md-end to align at the end of the column for display md and upwards and justify-content-center to align to center for display xs and upwards.

Demo

W3Schools

w3schools.com › bootstrap5 › bootstrap_flex.php

Bootstrap 5 Flex

Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:

Educative

educative.io › answers › what-is-justify-content-in-bootstrap-4

What is justify-content in Bootstrap 4?

Here are a few of its properties: justify-content-start: Lists all items at the start of the flex-box container. justify-content-end: Lists all items at the end of the flex-box container.

Bootstrap

getbootstrap.com › docs › 5.3 › layout › columns

Columns · Bootstrap v5.3

<div class="container text-center"> <div class="row"> <div class="col align-self-start"> One of three columns </div> <div class="col align-self-center"> One of three columns </div> <div class="col align-self-end"> One of three columns </div> </div> </div> Change the horizontal alignment with any of the responsive justify-content-* classes.

Bootstrap Shuffle

bootstrapshuffle.com › classes › flexbox › justify-content-sm-end

justify-content-sm-end - Bootstrap CSS class

Bootstrap CSS class justify-content-sm-end with source code and live preview. You can copy our examples and paste them into your project!

Shuffle

shuffle.dev › bootstrap › classes › flexbox › justify-content-md-end

Bootstrap CSS class: justify-content-md-end

Bootstrap CSS class justify-content-md-end with source code and live preview. You can copy the example and paste it into your project or use the Shuffle editor and not write code by hand!

Shuffle

shuffle.dev › bootstrap › classes › flexbox › justify-content-lg-end

Bootstrap CSS class: justify-content-lg-end - Shuffle

Bootstrap CSS class justify-content-lg-end with source code and live preview. You can copy the example and paste it into your project or use the Shuffle editor and not write code by hand!

GitHub

github.com › orgs › twbs › discussions › 36773

".justify-content-end" to align menu links to right side not working · twbs · Discussion #36773

September 4, 2023 - I'm designing a website and just shifted to incorporating Bootstrap 5 and have made a navbar from the Bootstrap Docs and as by default the menu was left aligned right after the brand image. To change the direction of the menu from left to right, Bootstrap has a .justify-content-end class but adding it to my