Can I align navigation in Bootstrap (5) to the grid? As in my example?

Question

Is it even possible to do it? I would appreciate any directions. I would like to stay within Bootstrap framework

Text blocks should be aligned with the navigation border left and right:

aligned

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container ">
    <a class="navbar-brand" href="#">
      <img data="data-inject-svg" src="https://via.placeholder.com/50" alt="logo">
    </a>
    <button class="navbar-toggler" 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>
    <div class="collapse navbar-collapse float-end" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid ">
  <div class="row justify-content-start reflections">
    <div class="col-6 ">
      wide text
    </div>
    <div class="col-4 col-offset-2">
      <div class="text">
        text
      </div>
    </div>
  </div>
  <div class="row justify-content-start reflections">
    <div class="col-4 offset-2 ">
      text
    </div>
    <div class="col-6 ">
      wide text
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Can you include the full relevant HTML code, I don't see no dropdowns right now. — avia
– avia, Commented Nov 23, 2021 at 5:39
It might be because you're using container for your navbar so this creates static space to the left and right and using container-fluid for your content which also creates space to the left and right but it's dynamic according to screen size. Try simply using container in all cases. You may also have to remove justify-content-start from your rows. This setting always pushes the content as far as possible to the left. — Cutey from Cute Code
– Cutey from Cute Code, Commented Nov 23, 2021 at 7:48
I do want the content with "wide text" to stretch to "left or right" depending on the screen size. Thank you Guys/Gals for the comments! the only other code I have is: cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css and cdn.jsdelivr.net/npm/[email protected]/dist/js/… at the bottom of the page. — Gothearl
– Gothearl, Commented Nov 23, 2021 at 11:12

Gothearl · Accepted Answer · 2021-11-23 15:12:43Z

0

alright, I think this is the answer -->

image

<div class="container-fluid ">
  <div class="row ">
    <div class="col-8 offset-2 col-offset-2">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
         your navbar
      </nav>
    </div>
  </div>
</div>

edited Nov 23, 2021 at 15:12

answered Nov 23, 2021 at 12:51

Gothearl

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Can I align navigation in Bootstrap (5) to the grid? As in my example?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related