0

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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Gothearl
  • 1
  • 1
  • Hi welcome to SO. Do you have any custom CSS? – avia Nov 23 '21 at 05:38
  • Can you include the full relevant HTML code, I don't see no dropdowns right now. – avia Nov 23 '21 at 05: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 Nov 23 '21 at 07: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/bootstrap@5.1.3/dist/css/bootstrap.min.css and https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js at the bottom of the page. – Gothearl Nov 23 '21 at 11:12

1 Answers1

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>
Gothearl
  • 1
  • 1
  • 1
    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](/help/how-to-answer). – Community Nov 23 '21 at 13:12