I'm trying to align my brand and the rest of the links on the opposite side(brand on left and other links on the right) to fit on the mobile view but the links on the right move to the next line. Any suggestions will help thanks.I'm using bootstrap 5. Here's my code:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light">
<div class="col border border-danger">
<div class="d-sm-flex p-2 bd-highlight">
<button
class="navbar-toggler align-items-sm-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>NEW ITEMS</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>CodePudding user response：
If you are using Bootstrap 5, you can go to https://getbootstrap.com/ and use the top nav bar to navigate to https://getbootstrap.com/docs/5.1/examples/. In here, you'll find an example page called "Headers", located here: https://getbootstrap.com/docs/5.1/examples/headers/.
These example headers could be a great resource for you to model your code after.
One other helpful resource is the Bootstrap 5 nav bar component page found here: https://getbootstrap.com/docs/5.1/components/navbar/
There are several examples on this page that could give you some ideas.
If you are new to HTML, CSS and/or Bootstrap, I would suggest starting off with one of their examples/templates and modifying rather than building your own.
Side note: it may also help if your code is more readable. You could put your code through an HTML formatter like: https://webformatter.com/html or use software like https://prettier.io/docs/en/.
Best of luck!
CodePudding user response：
Those items are wrapping to next line at the extra small breakpoint (or < small) because you are using .d-sm-flex. The display is only set to flex at the small and larger breakpoints.
To enable the flex behavior for all screen sizes use .d-flex.
https://getbootstrap.com/docs/5.1/utilities/flex/#enable-flex-behaviors
You also have a couple of issues with your code that I have corrected in the snippet.
.cols should be direct descendants of.rows
https://getbootstrap.com/docs/5.1/layout/columns/#how-they-work- The scripts (popper.js & bootstrap.js) should be included just before the closing
</body>tag after all content elements.
https://getbootstrap.com/docs/5.1/getting-started/introduction/#js
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<nav class="nav-navbar navbar-expand-lg navbar-light col">
<div class="border border-danger">
<div class="d-flex p-2 bd-highlight">
<button class="navbar-toggler align-items-sm-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">brand name</a>
<div class="d-flex flex-sm-row-reverse">
<div class="p-2 bd-highlight">Search</div>
<div class="p-2 bd-highlight">cart</div>
<div class="p-2 bd-highlight">Login</div>
<div class="p-2 bd-highlight">Sign up</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">NEW ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TOP ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEATURED</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>