CODEWITHSUNDEEP
htmlcssbootstrap-4navbar
Bob Williams
Bob Williams

Reputation: 23

Navbar not expanding to fill width of page

I am making a website and I want it to look nice when being used on mobile. However, I can't figure out to eliminate the excess white space on the right of the navbar.

Picture of the problem:

Picture of the problem

I have tried messing with the CSS of body and nav tags. Also, I tried to wrap sections of the code with div class="container-fluid">.

a:hover {
  color: hotpink;
}

nav {
  background-color: #009fe3;
  width: 100%;
  box-sizing: content-box;
}

body {
  margin: 0;
  width: 100%;
}
<nav class="navbar navbar-expand-lg navbar-dark">
  <div class='container-fluid'>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="/">A</a>
        <a class="nav-item nav-link" href="/f3">B</a>
        <a class="nav-item nav-link" href="/f2">C</a>
        <a class="nav-item nav-link" href='/f4'>D</a>
        <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="/f5">F</a>
      </div>
    </div>
  </div>
</nav>
<div class='container-fluid'>
  <br>
  <h2>Heading</h2><small>some url</small>
  <table class="table table-hover">
    <thead>
      <tr>
        <h2>Another heading</h2><small>Another url</small>
      </tr>
      <tr>
        <th scope="col">Consectetur</th>
        <th scope="col">Adipiscing </th>
        <th scope="col">Tristique</th>
        <th scope="col">Porttitor </th>
        <th scope="col">Eleifend </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>vitae volutpat</td>
        <td>Duis mollis</td>
        <td>Nulla ultricies</td>
        <td>Vestibulum eleifend</td>
        <td>quis nibh</td>
      </tr>
    </tbody>
  </table>

</div>

When viewing this HTML using the Chrome Developer tool on the mobile (phone) view, there is lots of white space to the right of the navbar. But, I would like to eliminate all the white space and make it so the navbar expands to fill the space. This would end up looking a lot better when people access the website using their phones.

Upvotes: 1

Views: 4400

Answers (6)

Franklin Wagbara
Franklin Wagbara

Reputation: 1

I was not able to replicate your problem. However, based on the description you provided, you can resolve this issue by;

  1. Removing the "container-fluid" class you added to one of your div tag.
  2. Add a css style, that sets the body tag's width to "fit-content". Hope this helps.

Upvotes: 0

Md Junaid Alam
Md Junaid Alam

Reputation: 1349

You are using table box-sizing as content-box for nav, use border-box.

nav {
    background-color: #009fe3;
    width: 100%;
    box-sizing: content-box;
    }

Border-box will allow to calculate the width inside element.

The table is also going out, so wrap the table inside a container.

You can see it working.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>

<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"
/>

<title>Blank</title>

<style>
a:hover {
color: hotpink;
}

nav {
background-color: #009fe3;
width: 100%;
box-sizing: border-box;
}

body {
margin: 0;
width: 100%;
}
.table-container {
width: 100%;
overflow-x: scroll;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href="/f4">D</a>
<a class="nav-item nav-link active" href="/f1"
>E<span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>

<div class="container-fluid">
<br />

<h2>Heading</h2>
<small>some url</small>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2>
<small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing</th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor</th>
<th scope="col">Eleifend</th>
</tr>
</thead>

<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>

Upvotes: 0

Ishan Bhatt
Ishan Bhatt

Reputation: 54

Remove all the container-fluid classes first and replace them with "container" class.You have given 100% of width to nav class, remove it first.Then add one div before nav tag and end after nav ends.Try this out:

<div style=" width: 100%;">
  <nav class="navbar navbar-expand-lg navbar-dark">
    //NAV CONTENT
  </nav> 
</div>

Upvotes: 0

Arshiya Khanam
Arshiya Khanam

Reputation: 613

Your table content is overflowing that is why that white space is coming if you want to remove that white space so you need to reduce the font size of table thread th text. font-size: 12px;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

	<title>Blank</title>

   <style>
  a:hover {
  color: hotpink;
}

nav {
	background-color: #009fe3;
	width: 100%;
	box-sizing: content-box;
	}
	
body {
  margin:0;
	width: 100%;
}
@media only screen and (max-width: 425px) {
 .table thead th {
    font-size: 12px;
  }
}


</style>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar-dark">
	<div class='container-fluid'>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
	  <a class="nav-item nav-link" href="/">A</a>
      <a class="nav-item nav-link" href="/f3">B</a>
	  <a class="nav-item nav-link" href="/f2">C</a>
	  <a class="nav-item nav-link" href='/f4'>D</a>
      <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
	  <a class="nav-item nav-link" href="/f5">F</a>
      
      
      </div>
    </div>
  </div>
  
</nav> 
   
	<div class='container-fluid'>
	
	<br>
	
	<h2>Heading</h2><small>some url</small>
	<table class="table table-hover">
  		<thead>
  			<tr>
   				<h2>Another heading</h2><small>Another url</small>
  			</tr>
    <tr>
      <th scope="col">Consectetur</th>
      <th scope="col">Adipiscing </th>
      <th scope="col">Tristique</th>
      <th scope="col">Porttitor </th>
      <th scope="col">Eleifend </th>
      
    </tr>

  		</thead>

  <tbody>
  	<tr>
      <td>vitae volutpat</td>
      <td>Duis mollis</td>
      <td>Nulla ultricies</td>
      <td>Vestibulum eleifend</td>
      <td>quis nibh</td>
    </tr>
  </tbody>
</table>
</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>

Upvotes: 0

Sethuraman
Sethuraman

Reputation: 651

This is because of padding , for div you are using width:100% and padding also applying so only you are getting scroll at bottom on normal desktop. clear padding for mobile view for td you will get good progress

Upvotes: 0

umbra8191
umbra8191

Reputation: 26

Your table width is larger than the parent container, you need to either adjust the css for the table to scale with the screen, or put the whole table into a scrolling div. I've put and example of scrolling div below, table css help 100% width table overflowing div container

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

    <title>Blank</title>

   <style>
  a:hover {
  color: hotpink;
}

nav {
    background-color: #009fe3;
    width: 100%;
    box-sizing: content-box;
    }

body {
    margin:0;
    width: 100%;
}

</style>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar-dark">
    <div class='container-fluid'>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="/">A</a>
      <a class="nav-item nav-link" href="/f3">B</a>
      <a class="nav-item nav-link" href="/f2">C</a>
      <a class="nav-item nav-link" href='/f4'>D</a>
      <a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="/f5">F</a>


      </div>
    </div>
  </div>

</nav> 

    <div class='container-fluid'>

    <br>

    <h2>Heading</h2><small>some url</small>
    <div style="overflow-y: auto;">
    <table class="table table-hover">
            <thead>
                <tr>
                    <h2>Another heading</h2><small>Another url</small>
                </tr>
      <tr>
        <th scope="col">Consectetur</th>
        <th scope="col">Adipiscing </th>
        <th scope="col">Tristique</th>
        <th scope="col">Porttitor </th>
        <th scope="col">Eleifend </th>

      </tr>

            </thead>

    <tbody>
        <tr>
        <td>vitae volutpat</td>
        <td>Duis mollis</td>
        <td>Nulla ultricies</td>
        <td>Vestibulum eleifend</td>
        <td>quis nibh</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>

Upvotes: 1

Related Questions