'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:
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.
Solution 1:[1]
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>
Solution 2:[2]
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
Solution 3:[3]
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>Solution 4:[4]
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>
Solution 5:[5]
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>Solution 6:[6]
I was not able to replicate your problem. However, based on the description you provided, you can resolve this issue by;
- Removing the "container-fluid" class you added to one of your div tag.
- Add a css style, that sets the body tag's width to "fit-content". Hope this helps.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | umbra8191 |
| Solution 2 | Sethuraman |
| Solution 3 | Arshiya Khanam |
| Solution 4 | Ishan Bhatt |
| Solution 5 | Md Junaid Alam |
| Solution 6 |