Question 244007 in Html Question posted in
Some basic documentation can be found here.

Html – bootstrap 4 navbar in a container must have same width

I am novice. I am using bootstrap-4 for making a website. In which there must be a text scrolling in top and after that menu along with logo and name.

I am using two container for the same. 1st for Text scrolling in top and 2nd for menu bar. In 2nd container I am using navbar. But Navbar is not getting same width as its parent container.
I wish both container must have same width along with nav-bar

My Codes:

<header>
    <!-- top header for scrolling text marque -->
    <div class="container">
        <div class="row">
          <div  style="background-color: black; border-color: orange;  width: 100%; height: 2rem" >
          </div>
        </div>
    </div>
    <!-- for menu -->
    <div class="container" style="border: 1px; border-color:red;border-style: double;height: 4rem;">
      <nav class="navbar navbar-expand-md" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
        <a class="navbar-brand" href="#">Navbar</a>
      </nav>
    </div>
</header>
Tags:

2

Answers


  1. 0

    Both the containers have the same width. The only catch here is that you do not have a div with col class. If you add a div with col-md-12 inside the row, it will match the width of the second container, like:

    <div class="row">
    <div class="col-md-12">
        <div style="background-color: black; border-color: orange;  width: 100%; height: 2rem"></div>
    </div>
</div>

    The other solution you can try is to add a p-0 class with the second container, like:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <!-- top header for scrolling text marque -->
  <div class="container">
    <div class="row">
      <div style="background-color: black; border-color: orange;  width: 100%; height: 2rem">
      </div>
    </div>
  </div>
  <!-- for menu -->
  <div class="container p-0" style="border: 1px; border-color:red;border-style: double;height: 4rem;">
    <nav class="navbar navbar-expand-md" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>
  </div>
</header>
    Login or Signup to reply.
  2. 0 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<header>
    <div class="container">
        <!-- Row for scrolling text -->
        <div class="row">
            <div class="col-md-12" style="background-color: black; border-color: orange; height: 2rem">
                <!-- Add your scrolling text content here -->
            </div>
        </div>

        <!-- Row for menu -->
        <div class="row">
            <div class="col-md-12 px-0" style="border: 1px; border-color: red; border-style: double; height: 4rem;">
                <nav class="navbar navbar-expand-md" style="background-color: rgba(255, 255, 128); border-style: double; border-color: red;">
                    <a class="navbar-brand" href="#">Navbar</a>
                </nav>
            </div>
        </div>
    </div>
</header>

    https://stackoverflow.com/users/8149710/haseeb-hassy
    The answer is correct and I have also tried this because the same design makes many ways to make it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search