can anyone help me find a bug in bootstrap container fluid which i just need to add some padding but not working
the code only works when we use
.container-fluid {
padding: 3% 15% !important;
}
if we remove !important it is not working do you know the reason
i will share the code below
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup" />
</div>
</div>
</div>
</section>
the css code is
#title {
background-color: #ff4c78;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: "Montserrat", sans-serif;
font-size: 3rem;
line-height: 1.5rem;
}
This usually happens if you've placed the link to your own custom style sheet or defined custom CSS styles inside the <style> tag before linking the style sheet of Bootstrap. The browser follows a top-down approach while rendering the pages and so any CSS styles that share the same name (in your case: .container-fluid) with the style of another style sheet, then your custom CSS styles will be overwritten by the styles in the last style sheet.
Solution: Place the link to your custom style sheet after linking all the other style sheets like that of Bootstrap, Font Awesome, etc.
If you could include the code that you put in between the <head> tag, I could confirm this.
P.S. I see you're doing the TinDog project so you're probably following Angela Yu's course. Here's the GitHub link to my code for reference.
Related
Below is a snippet of code from my html and css files on a website.
I want the navbar to be slightly transparent and the links to be centered on the navbar but my css wont apply to the navbar, just unsure why.
HTML
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Navigation bar-->
<nav class="navbar navbar-expand-md bg-dark navbar-dark transparent" id="navbar">
<a class="navbar-brand" href="index.html">
<img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
</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="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactus.html">Contact us</a>
</li>
</ul>
</div>
</nav>
<!--NavBar Ends-->
<img src="images/ShopInsideBooking (4).png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</body>
CSS
#navbar{
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
Any help is appreciated :)
Right.
First thing you need is the good old !important on the background-color because bootstrap already have a bunch of styles and you won't be able to override them without it.
That fixes your issue with the transparency. You can also use opacity instead of background color if you're not changing the current color and the result is acceptable.
For the aligning of things, bootstrap has a few flex features (if you're using BS5) and you can make use of them.
One thing that I would do is to remove the <nav> from the div/row/col stuff because divs are not flex by design so you'll have to change the display of several elements or even add hacks with auto margin to get the output. Add the container directly on nav or navbar items, whatever you feel is suitable but remove the row/col because since it's a nav I'm assuming is the main nav.
Ok.
Once you remove the div/row/col you can just set the nav#navbar as flex and add a margin: 0 auto to it.
Like this https://jsfiddle.net/x1c0yanr/
nav#navbar {
background-color:rgba(0,0,0,0.5) !important;
}
nav#navbar ul.navbar-nav {
display: flex;
margin: 0 auto;
}
EDIT: I realized after answering that you're using bootstrap 4 so I tested using BS4.4.1 as well. It works :D Take a look at flex. aligning, arranging, ordering. It's amazingly easy to to things using it. Here using BS4.4.1: https://jsfiddle.net/v3dn8cqu/
The top down padding is set to 3% but left right padding of 15% doesn't work. Can someone explain what is wrong here? I want to set the top-down padding of 3% and left-right padding of 15% with respective to fluid container. But it seems that left-right padding is not working. I debugged it using chrome developer tools. But the left- right padding were crossed out.
<div class="container-fluid">
<div class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class ="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class ="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class ="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
<!-- Title -->
<div class="row">
<div class="col-lg-6 col-md-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6 col-md-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
CSS FILE
.container-fluid{
padding: 3% 15%;}
Put " <link rel="stylesheet" " at the bottom of head so i'ts bellow the bootstrap link :) Top to bottom priority!
Bootstrap containers have horizontal padding already set. You can limit the width like this <div class="container-fluid" style="max-width: calc( 100% - (15% * 2) )">...</div>
From my experience, bootstrap has default dimensions for its margin and padding. Setting custom dimensions may not work.
container-fluid is a custom bootstrap class. You cannot override it. You'd need to add another class if you want to customize the padding.
or customise according to the docs: https://getbootstrap.com/docs/5.2/layout/containers/#how-they-work
We are having trouble with our responsive navigation covering content.
When the user toggles the navigation button, we want it to push the H1 and down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our "Denver Moving and Storage" content.
We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This is our code:
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I don't know if your body CSS is affecting it or not, since you didn't post that out. But just by looking at your HTML, I see something wrong with your button toggler:
<button ... data-bs-toggle="collapse" data-bs-target="#responsive-navbar" />
Where did you get this kind of syntax from? In Bootstrap documentation, there is no -bs on the data attribute.
In order for the toggler to work properly, you need to remove -bs.
Minor improvement
Your "free estimate" button. Bootstrap has a button style to make an anchor tag look like a button. You don't need to wrap a button with an anchor tag. You can change it to something like:
<li class="nav-item">
<a class="btn btn-success" href="free-estimate.html">Free Estimate</a>
</li>
demo: https://jsfiddle.net/davidliang2008/p4ofdcae/8/
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
<body>
<section id="title">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">TinDog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ml-auto">
<li class="nav-item"></li>
<a class="nav-link" href="">Contact</a>
<li class="nav-item"></li>
<a class="nav-link" href="">pricing</a>
<li class="nav-item"></li>
<a class="nav-link" href="">Download</a>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6 col-md-12">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6 col-md-12">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
--------css--------------------------------------------
#title{
background-color:#ff4c68;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
}
.container-fluid{
padding:200px;
}
padding is not working in bootstrap v 4.5 in fluid containers all style sheets are linked properly but why padding is not getting applied? also if i write padding left or right still it do not work?
If you want to add a padding then you can simply do
.container-fluid{
padding: 200px !important;
}
or give the div an id and then specify the padding without !important.
Please help, it's driving me crazy (it's insane that I have spent so much time on the navbar text color overall).
I'm just learning web development so I just figured out how to change the text color in my navbar and now it turns an ugly blue when I hover over it. How do I figure out how to fix that?
I know others have asked this before but they all get specific answers that don't apply to my code and I don't understand why the solutions work, so I could figure it out by myself.
Thanks for your help!
<!--Navbar-->
<nav class="navbar navbar-expand-lg yellow lighten-3 fixed-top scrolling-navbar">
<div class="container">
<!--center the navbar content-->
<!-- Navbar brand -->
<a class="navbar-brand navbar-text-color-custom" href="#">Pawsitive Lead</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links - each sends you to the specific section of the page -->
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#intro">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#examples">Izkušnje</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#gallery">V razmislek</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#contact">Pišite nam</a>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Išči" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
You can approach it by different ways ..
define a separate class in a separate css stylesheet and override the color by using !important :
e.g : make a class newClass in newCss.css
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
define a style tag in the html :
<style>
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
</style>
in HTML , put the class inside the anchor:
<li class="nav-item">
<a class=" newClass nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a></li>
By using !important you ensure that the css color red is applied to the anchor.