Bootstrap CSS and Navbar - How to decrease space between items?
Your Navbar class should change to navbar-nav and margin-left should be auto to set your navbar float left by ml-auto. Or Use Flex Box I add to your CSS file which is Commented for the container.
For Spacing between items, you can use margin-right in your CSS file.
* {
box-sizing: border-box;
}
body {
background-color: dimgray;
}
#header-nav {
background-color: #272727;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
}
/* you can also use flex box
#header-nav .container {
display: flex;
align-content: flex-start;
}
*/
#header-nav a {
color: #FFF;
margin-right: 2rem; /* Space Between Items */
}<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<a href="#about"><i class="fas fa-question"></i> About</a>
<a href="#rules"><i class="fas fa-book"></i> Rules</a>
<a href="#vote"><i class="fas fa-vote-yea"></i> Vote</a>
<a href="#store"><i class="fas fa-tags"></i> Store</a>
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>Remove gap between bootstrap navbar and content
You have to use more specific selectors than the ones used by the framework. E.g. for .navbar use nav.navbar
EDIT: In your case, .bg-dark class is overriding the red background, remove it from here:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
to
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
See below:
nav.navbar {
margin-bottom: 0;
background-color: red;
font-size: 1.4em;
font-family: 'Pinyon Script', cursive;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Pinyon+Script" rel="stylesheet">
<title>Dulce Figueiras - Makeup</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Local css file -->
<link rel="stylesheet" href="css/style.css">
<!-- Custom styles for this template -->
<style type="text/css">
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand" href="#">Dulce Figueiras</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Casamentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Formações</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Testemunhos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tabela de Preços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contactos</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
-->
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid bg" id="landingPage">
<div class="container text-center">
<h1>Dulce Figueiras</h1>
<h3>Makeup Artist</h3>
</div>
</div>How would I remove the gap between the image and the Bootstrap Nav bar?
you're doing it right, make sure you use
.navbar { margin-bottom:0px !important; }
.carousel-caption { margin-top:0px !important }
How to remove white gap between navbar and header?
You need to position the div .side-bar explicitly at the top of its parent using top: 0;. (Note this di is already positioned absolute)
.side-bar{
top: 0;
}
Snippet below
@import url(http://fonts.googleapis.com/css?family=Lato);
.container {
width: 800px;
overflow: hidden;
display: inline-block;
margin-top: 0px;
}
.side-bar {
background: #74AFAD;
position: absolute;
height: 100%;
width: 200px;
color: #fff;
transition: margin-left 0.5s;
}
.side-bar ul {
list-style: none;
padding: 0px;
}
.side-bar ul li.menu-head {
font-family: 'Lato', sans-serif;
padding: 20px;
}
.side-bar ul li.menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
}
.side-bar ul .menu-head a {
color: #fff;
text-decoration: none;
height: 50px;
margin: 0;
}
.side-bar ul .menu li a {
color: #fff;
text-decoration: none;
display: inline-table;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.side-bar ul .menu li a:hover {
border-left: 3px solid #ECECEA;
padding-left: 17px;
}
.side-bar ul .menu li a.active {
padding-left: 17px;
background: #D9853B;
border-left: 3px solid #ECECEA;
}
.side-bar ul .menu li a.active:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 7px solid #D9853B;
margin-top: -10px;
margin-left: 180px;
}
.content {
padding-left: 200px;
transition: padding-left 0.5s;
}
.active>.side-bar {
margin-left: -150px;
transition: margin-left 0.5s;
}
.active>.content {
padding-left: 50px;
transition: padding-left 0.5s;
}
#logout_sidebar {
position: absolute;
display: inline-block;
bottom: 0;
width: 100%;
}
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 220px);
}
.row-offcanvas-left {
left: -220px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: #f5f5f5;
float: left;
height: 100%;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
#main {
height: 100%;
overflow: auto;
}
.side-bar {
top: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="side-bar">
<ul>
<li class="menu-head">
ADMIN PANEL <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
</li>
<div class="menu">
<li>
<a href="#" class="active">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
</li>
<li>
<a href="#">User List<span class="glyphicon glyphicon-user pull-right"></span></a>
</li>
<li>
<a href="#">Add New Product<span class="glyphicon glyphicon-plus pull-right"></span></a>
</li>
<li>
<a href="welcome.php">Go to Website <span class="glyphicon glyphicon-globe pull-right"></span></a>
</li>
</div>
<div class="menu ">
<li id="logout_sidebar">
<a href="logout.php">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>
</li>
</div>
</ul>
</div>
<div class="content">
<!-- show user list -->
<!-- end of show user list-->
</div>
</div>
</div>
</div>
</body>
</html>How to remove a gap between navbar and container-fluid?
The navbar class has a default margin-bottom:20px in the bootstrap css. You can override it by adding this:
.navbar {
margin-bottom: 0px;
}
N.B.: Make sure the above css property is below the bootstrap default css.
How to get rid of space between navbar and picture?
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
How to remove gap between bootstrap navbar and dropdown item
This rule (border-width: 0px;) is causing the gap.
You can add a bottom border that's the same color as your navbar (or you can reduce the margin of the dropdown-menu class by 1px but it does look awkward since the dropdown-menu is not perfectly inline with the dropdown trigger).
Alternative approach with margin
@media (min-width: 768px) {
#custom-bootstrap-menu.navbar-default .dropdown-menu {
border: none;
margin-top: -1px;
}
}
Bottom Border Approach: See Working Example
html {
background-color: red;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: #fbb216;
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-color: rgba(13, 65, 103, 1);
border: none;
border-bottom: 1px solid rgba(13, 65, 103, 1);
border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a {
color: rgba(255, 255, 255, 1);
background-color: rgba(13, 65, 103, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav > li > a:focus {
color: rgba(13, 65, 103, 1);
background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav > .active > a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(13, 65, 103, 1);
background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #ffffff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navlogo"> <a class="navbar-brand" href="#">CHEEZ-IT!</a>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Who are Cheez-it's</a>
</li>
<li><a href="#">Credentials</a>
</li>
</ul>
</li>
<li><a href="#contact">Our Services</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Industries <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Cheeze-it Solar</a>
</li>
<li><a href="#">Cheeze-it Infrastructure</a>
</li>
<li><a href="#">Cheeze-it Harvest</a>
</li>
</ul>
</li>
<li><a href="#contact">Partners</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>Related Topics
How to Preload a Page Using HTML5
Ruby Slim - How to Define an Element's Class with a Rails Helper or Variable
Using Os 9 Resource Fork Fonts in CSS with @Font-Face
Put Icon Inside Input Element in a Form (Not as Background Image!)
Foundation 5 Off-Canvas Full Height of Device
Float 2 Elements Side by Side Inside a Container Div
How Would I Remove the Gap Between the Image and the Bootstrap Nav Bar
Rectangles Instead of Whitespace in Chrome
Header/Footer Layout with 100% Content Height in IE8
Internet Explorer Doesn't Recognise the 'Html' CSS Background Image Tag
Google Chrome - Rendering Differences When Zooming In/Out
Hidden Radio Button But Box Around It in IE8
Triangle Bottom CSS with Background
How to Save the Content in Uiwebview for Faster Loading on Next Launch
How to Calculate Required Hue-Rotate to Generate Specific Colour