How to override Bootstrap CSS Style to Customise using CSS [duplicate] - 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?

Related

why is nav icon not showing?

<!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>

my navbar img dont support float left in bootstrap

i code a navbar and use bootstrap for that with this code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=divice-width ,intial-scale=1">
<title>complete bootstrap 4 website layout</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</head>
<body>
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/mehrlogo.png" alt="">
</div>
</nav>
</body>
</html>
i wanna set my logo to left of browser but it wont
what the problem
Bootstrap 4
Note that the Bootstrap4 docs use the div tag with the float class.
https://getbootstrap.com/docs/4.0/utilities/float/
It won't work for a tag.
Bootstrap less that 4
<a href="" class="navbar-brand float-left">
I notice that you have added a float-left class in the anchor tag.
As far as I know, there is no class in Bootstrap as float-left.
You can simply define your own class.
<style>
.float-left {
float:left;
}
</style>
Hope you find it helpful :)
This is a bad practice you are doing because under navbar .container-fluid not using because this is a container where we have to put some other class like row col and etc
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<img src="img/mehrlogo.png" alt="">
</div>
</nav>
The good practice is simply use bootstrap navbar which is available on many resource from the internet the simple navbar example given below and in bootstrap.min.css file there are many css class just call class name to use in your project.
If you use this code then no need to set float left and float right just use logo under navbar brand with img tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
you can use list to do that it is very sample like
<!doctype html>
<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<ul class="mr-auto mb-0 pl-0">
<img src="https://res.cloudinary.com/nalabdou/image/upload/v1585057140/user.png" style="width:35px;height:35px"/>
</ul>
</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>
We think your logo is an i tag; add this class
<i class="mr-auto"></i>
If your logo is not an i tag, you can use this piece of code too; tags like img,div etc.

buttons resizing on site with Bootstrap

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

CSS "Background-image" doesn't display

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.

Bootstrap navbar-toggler-icon not visible but functioning normally [duplicate]

This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 2 years ago.
I am trying to get my bootstrap navbar implemented into my handlebars layout file. I've noticed some weird things happening with bootstrap and this is no exception. Once I shrink my window to a size where the navbar-toggler-icon should show, it is not visible, but it is still functioning there like it should, I just can't see it.
Here is my entire layout.hbs class:
<!DOCTYPE html>
<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" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<nav id="navigation" class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</div>
</nav>
{{{body}}}
<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>
Here is an example of whats happening:
Picture of whats happening
I was told changing my navbar class to navbar-inverse would make it appear but I had no luck with this either.
Try using navbar navbar-light instead of navbar navbar-inverse.
Bootstrap 4 is a major rewrite of the older Bootstrap and this was changed
Bootstrap Migration guide
For Bootstrap 4:
change your bootstrap class on this line <nav id="navigation" class="navbar navbar-inverse"> as shown below:
<nav id="navigation" class="navbar navbar-dark bg-dark">