I've seen a few examples that try to center the Bootstrap navbar but I can't get any of them to work. I've tried style="text-align:center" on the nav, div and ul but it doesn't have any effect.
Any ideas what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills">
<li><a role="presentation" href="#">Link1</a></li>
<li><a role="presentation" href="#">Link2</a></li>
<li><a role="presentation" href="#">Link3</a></li>
<li><a role="presentation" href="#">Link4</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
https://plnkr.co/edit/EDf9leSPZVoS4l9dQCfv?p=preview
The problem is that ur "nav nav-pills li" have a default "float:left" in ur css. That makes that ur text-align never work because float will always overwritte any other text properties.
One way to fix this is copying the next declarations in ur css file:
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
text-align: center;
}
.nav-pills>li {
float: none !important;
display: inline-block;
}
Hope this works
.nav {
padding-left: 0px;
margin-bottom: 0px;
list-style: none;
display : table; // Add this
margin: auto; // Add this
}
Add last two css styles in bootstrap 3963 no line.
https://plnkr.co/edit/HAvko7diBJvtZRB5Vuxn?p=preview
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am making a webpage and i want that the name of the brand should appear right next to the brand logo, just to the right of the brand logo. I have tried using the float-left property but nothing is doing good.
I have provided both the html as well as css sheet, plz someone help. And if possible try to fix this without using flex-box.
Here's my code:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
background: url("BurgerKING1.png") no-repeat;
width: 152px;
height: 152px;
margin: 10px 15px 10px 0;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT TESTING</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="testing.css">
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght#0,900;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="testing.html" class="float-left">
<div id="logo-img" alt="logo image"></div>
</a>
<div class="navbar-brand ">
<a href="testing.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Make .navbar-image (I added a class name) and .navbar-brand both float left, then give .navbar-brand a margin-top to center it vertically:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
background: url("https://placekitten.com/200/200") no-repeat;
width: 152px;
height: 152px;
margin: 10px 15px 10px 0;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand{
margin-top: 50px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="testing.html" class="navbar-image float-left">
<div id="logo-img" alt="logo image"></div>
</a>
<div class="navbar-brand ">
<a href="testing.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</div>
</nav>
</header>
CSS:
.float-left{
float: left
}
.navbar-brand {
float: left
}
I had a look at your code and you can achieve that by using flexbox and its property justify-content: flex-start, add below properties to your style sheet -
.navbar-header{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
I am a beginner when it comes to website design. How do I get rid of the whitespace between my jumbotron navbar and footer?
There is whitespace between the jumbotron and the following Navbar aswell as the following footer thereafter. Attached is the following jsfiddle> https://jsfiddle.net/5c6kx9tu/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="mj.css">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
And here is the css
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin-bottom: 0px;
}
.footer{
margin: 0px;
background-color: grey;
bottom: 0px;
padding: 20px;
}
.text-center{
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
I'd strongly recommend not modifying core bootstrap styles, but rather utilizing some helper classes.
If you're using Bootstrap 3 (which you are loading in your code), you'll need to write some helper classes, like I've done in this fiddle, and below:
CSS helper classes (you can add other - mt (for margin top), 5em (for .5 em), etc:
/* helper class, modeled after Bootstrap 4 helper classes */
.mb-0 {
margin-bottom: 0 !important;
}
Then simply add those classes to your markup, like below:
<body>
<div class="jumbotron mb-0">
</div>
<nav class="navbar navbar-default mb-0">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Quotes</li>
</ul>
</div>
</nav>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</body>
Working example / fiddle: https://jsfiddle.net/cale_b/0gn7w3Lk/1/
If you're using Bootstrap 4, those helper classes already exist, and you can use them: https://v4-alpha.getbootstrap.com/utilities/spacing/
If you add
.navbar {
margin: 0;
}
That should clear it up. Play around with that.
Make sure you add that somewhere AFTER your include of the bootstrap style sheet, so it overrides the bootstrap css.
To remove the whitespace between jumbotron and navbar, all you need to do is calling your stylesheet below the bootstrap stylesheet. And then, in your stylesheet, you need the following lines to remove the whitespace between navbar and footer:
.navbar {
margin-bottom: 0px;
}
In my opinion, it's better not to change bootstrap own classes, make your owns classes or id's instead.
Also keep in mind where you are going to add css, it's better add css after bootstrap otherwise you could change bootstrap logic. This means you could generate unwanted behaviors.
Here just an example adding id's: https://jsfiddle.net/5c6kx9tu/5/
#myJumbotron{
margin-bottom:0px;
background-color: red;//this color it's just to see the problem clear
}
#myNavbar{
background-color: green;//this color it's just to see the problem clear
margin-top: 0px;
}
The best solution then, in my opinion, is to make another file included after bootstrap and make your own classes for the elements that you want to change.
Kind of a peculiar thing happening here...
I'm using ASP.NET in Visual Studio 2015. When I add custom CSS within a <style> tag in the header of my HMTL document, my CSS will override Bootstrap's CSS, but when I reference my CSS in an external .css file it does not... Here is my code (the CSS in the style tag is the exact same as what's in the external css sheet):
<head runat="server">
//BOOTSTRAP CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%>
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS
<style>
//THIS CSS WILL OVERRIDE BOOTSTRAP CSS
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">X.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Projects</li>
<li>Contract</li>
</ul>
</div>
</div>
</nav>
</body>
All searches on Google for a resolution say that putting my .css link underneath the Boostrap CSS links should override it, but that's what I've tried and it's not working. Any suggestions?
Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.
Try and wrapping your html code inside a div and give it a class/id and try to override with that wrapping div.
HTML:
<div class="wrapping_class">
<nav class="navbar navbar-default">
</nav>
</div>
CSS:
.wrapping_class .navbar.navbar-default{
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
border-radius: 0px !important;
}
This is a solution based on CSS specificity that plays a role in overriding certain CSS rules based on their power.
Refer to this link for table of specificity values (for Star Wars fans a treat):
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
I'm trying to make a custom header for my website using boostrap navbar class, I'd like to change the links text color to white, the navbar background color to black and also change the links highlight color when the mouse goes over them.
Here is my html:
<html>
<head>
<meta charset="UTF-8" />
<!-- css files -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="main.css">
<!-- javascript -->
<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- webiste header -->
<nav class="navbar navbar-default navbar-fixed-top header">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</nav>
<body>
<html>
and here is my css:
.header{
background-color:#333333;
color:red;
font-size:1.5em;
}
.header li{
border-bottom:3px solid #333333;
}
.header li:hover{
background-color:black;
border-bottom:3px solid orange;
}
Everything seems to work but the links color is grey instead of white as you can see on this screenshot.
screenshot
.header a {
color: #fff;
}
.header a:hover {
color: #f00;
}
I have some issue with the nav menu of my website against the IE (again). Here I am trying to use Twitter's bootstrap to set up a menu bar for my website. Each of these items are supposed to align next to each other, which works well for Chrome, Firefox, and Safari. On Internet Explorer, however, each of the menu item are stacked on top of each other, and one menu item does occupy the entire width of the container. I wonder why the 'nav-justified' is not working on IE..?
Here is the header section:
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css" type="text/css"/>
<!-- Latest compiled and minified JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/master.css" />
<script src="lib/engine.js"></script>
</head>
This is the menu elements:
<div width="100%" style="color:white;">
<ul class="nav nav-pills nav-justified menu_bar">
<li>ABOUT US</li>
<li>NEW PROJECT</li>
<li>CURRENT PROJECT</li>
<li>PAST PROJECT</li>
<li>NEWS & PROMOTION</li>
<li>CONTACT US</li>
</ul>
</div>
And the css...
.menu_bar > li > a:hover,
.menu_bar > li > a:focus {
background-color: #312f32;
border: none;
color: #ddd241;
}
.menu_text {
font-family:'Cordia new';
font-size:140%;
color: white;
text-decoration: none;
color: #99979a;
}
This is my first time developing a website, and now I see the painful of ppl creating website for the IE... :'(
Making the <li> element float left in IE seems to fix it. You can add this to your HTML:
<!--[if lt IE 10]>
<style type="text/css" media="all">
.menu_bar > li {
float: left;
}
</style>
<![endif]-->