CODEWITHSUNDEEP
htmlcssbootstrap-4
Möhsin Maıik
Möhsin Maıik

Reputation: 19

bootstrap 4 containers overlapping

Made bootstrap 4 container to achieve a header shape like this

Header style trying to get

But when i try this to float-left and float-right in bootstrap 4 this happens My header is overlapping with two containers float left and float right as i seen in the header above.

My code is

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <body style="background-image:
    linear-gradient(to bottom, rgba(250, 231, 59, 0.52), rgba(129, 235, 8, 0.904)),
    url('images/tree.png'); background-size: cover;background-attachment: fixed; height: 100%;">
      <div class="container">
          <div class="float-left w-25">
              <ul class="navbar-nav">
                <li class="nav-item"><a href="#"><img
                      src="images/fb.png"></a>
                </li>
              </ul>
            </div>
      </div>
      <div class="container">
          
        <div class="row">
          <div class="col-10 offset-1">
            
            <nav class="navbar navbar-expand-lg">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <i class="material-icons">menu</i>
              </button>
    
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
    
                <ul class="mx-auto navbar-nav">
                  <li class="nav-item ml-2">
                    <a href="#" class="nav-link btn-warning btn rounded">Home</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">About us</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Product</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#">
                      <img src="images/mango.jpg" alt="Home" height="100" width="150">
                    </a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Order Form</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Gallery</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Contect us</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </body>

Example shows above behavior only in full screen view

Any help will be appreciated thanks in advance.

Upvotes: 1

Views: 581

Answers (1)

rahul patel
rahul patel

Reputation: 33

please can css changes.

.container:after, .container:before {
    display: table;
    content: '';
    clear: both;
    box-sizing: border-box;
}

your container was not clear and you add the this css

Upvotes: 1

Related Questions