I have been working on a site using the Download ready-to-use compiled code for Bootstrap v4.1.3 provided on the bootstrap page, and after reading how to work on the nav and the buttons I have stumbled into a problem.
below of my meta tags I have the css links
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only fix I have for the button that I have in the body bellow all the other code but on the nav the code button tag does the same for the code of a tag
From the navbar the only one that has given me a problem is Placeholder that is between the atags same with the code below and that is when I hover over the button it gets smaller and that changes the height of the navbar when I hover it, link works fine and all is just that the hover, also the same happens when I use the code for the button on the Navbar provided by bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
the button on my code works but the a with role=button on another page does the same as the nav.
Don't know if I fully explained my issue or is easy to understand, also the code I been using is on the documentation of the Bootstrap site, also for the navbar if I don't put fixed-top on the class it leaves a white space at the top of the page I put the following code on menustyle.css but it didn't fix it, is there another way to remove the white space without the need to use fixed-top in the nav class?
header{
margin:0px;
}
body{
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">nav-bar</a>
</div>
<ul class="nav navbar-nav">
<li class="active" title="home">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
Hey, this is the working snippet for nav bar . Please show us the issue which you're facing
Related
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<img src="img/logo.png" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5.
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
maybe your source in img tag is wrong
if you have img folder in your root path (based on src="img/logo.png") change it to <img src="/img/logo.png" alt="">
If not worked see html file paths
Since you are using Bootstrap 5.0.2, you got to do the following modification:
Add .navbar-light in <nav> to have the nav burger menu icon displayed. It's because the selector in Bootstrap to display the image is .navbar-light .navbar-toggler-icon so without .navbar-light it won't be displayed.
Spotted another issue with the interaction with this toggle icon. You'll need to do the following modifications as well:
Modify data-toggle="collapse" to data-bs-toggle="collapse"
Modify data-target="#navmenu" to data-bs-target="#navmenu"
FYI data-target was the previous annotation used in Bootstrap v4. Now, in Bootstrap v5, every data-* has been changed to data-bs-*
Don't forget to use aria-* as mentioned in Bootstrap documentation as well for accessibility :)
You have some BS missing classes
try this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-sm navbar-light navbar-expand-lg">
<div class="container">
<img src="https://i.imgur.com/vhbkAUt.png" width="40" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 1 year ago.
I have this navbar in all of bootstrap:
.navbar {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
My problem is when i have the code in my boot.css file:
The background of the navbar is still the dark colour that was implemented in the nav tag. How can I override bootstrap css styling and customise my own.
You could try changing the color by using id. If you want to change many elements at once this may not be the best solution for you tho.
Simply add the id of your choice in this line (id="navigationID in this example):
<nav class="navbar navbar-expand-md bg-dark navbar-dark" id="navigationID">
Then declare the background color you want in css for this id:
#navigationID{
background-color:aqua !important;
}
Here is a working version of what i'm talking about
https://jsfiddle.net/q6fb7k5o/
You have to remove the bg-dark class from the <navbar> element, and replace it with one of the bootstrap background color classes, like .bg-primary or some other color. For example:
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
Or you can make your own, such as:
.bg-aqua {
background-color: aqua !important;
}
and add it as a class to the <navbar>:
<nav class="navbar navbar-expand-md bg-aqua navbar-light">
Note: the navbar-dark and navbar-light classes will make the text in your navbar white or black, depending on which one you choose.
Here is the Bootstrap Navbar Color Scheme documentatation here.
bootstrap bg-dark has there own style with !important so that if you want to override bootstrap style you have to put more specification than bootstrap style or you can remove those bootstrap style.
see below details,
How can I override Bootstrap CSS styles?
I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.
Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.
I'm new to HTML and CSS and I encounter a problem that I just can't figure out. It has happened before in other attempts but in this case I was trying out bootstrap. So I don't think that there's the problem (in every case, my style.css file crushes the css files used for bootstrap).
So here are the facts. I want to create a logo that, when hovered, changes appearance. My css file is linked because the background colors does appear. The hover option works fine too. I must have forgotten something or lack some knowledge.
This question is frequently asked but I haven't found any answer able to help me.
, in case you want to check it out yourself and my files
.mclogo {
width: 45px;
height: 45px;
background-image: url('./pic/LogoMc1.png');
background-color: red;
}
.mclogo:hover {
background-color: blue;
background-image: url('./pic/LogoMc2.png');
}
<!doctype html>
<html lang="en">
<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="./public/style.css">
<title>Server :: le rôle-play sur minecraft</title>
</head>
<body>
<!--- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="https://minecraft.net/en-us/"><div class="mclogo"></div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Accueil</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Où suis-je ?</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Le serveur</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Nous rejoindre</a></li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance.
try removing the "." out of your file path on your css. In order for relative paths to work on CSS and HTML, you need to make sure it follows standard file notation
Can you view your image in the browser at the address you are specifying? In other words, does typing www.yourwebsite.com/pic/LogoMc1.png into your browser's address bar bring up the image?
If not the path is wrong.
If your browser does find the image at that address, try using the absolute path in your CSS declaration. If that doesn't work, you must be overriding these declarations somewhere later in your CSS file.
So I have this code below.
Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Using Bootstrap I would like to have this drop down that is currently on the left... in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?
Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?
Setting the left and right margin to auto might work. Try this! mx-auto - says margin on the x-axis (ie., left and right) is set to auto!
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav;">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Hope this helps!
Bootstrap includes a flexbox grid system for building layouts. It’s based on a 12 column layout and has multiple tiers. It is basically a css class like any other. Bootstrap comes with these classes predefined.
For example:
<div class="col-lg-12">
This would take up all available screen space
</div>
Then all you have to do is center your content and you will end up with a div that takes up the area you want with content that is centered inside it.
The lg in this example stands for a large area, but there are several of these. They can be used in pairs to change the grid based on the available screen area. These col types are predefined and can be easily referenced.
Using this grid system is going to make whatever you create responsive. It is a joy to work with. I recommend you check it out.