I am trying to replicate a website, but Some classes on bootstrap is working on coply.io but not on my browser. but you can see, I have applied card-deck, but the cards are not reacting and stay vertical instead of hr.
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="card-deck">
<!-- firstcard -->
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<!-- secondcard -->
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<!-- thirdcard -->
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
</section>
As I go through you code I find that you may be use wrong format of CDN
Your Code should be like this.
<!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">
<title>Hello, world!</title>
</head>
<body>
<!-- <h1>Hello, world!</h1> -->
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="card-deck">
<!-- firstcard -->
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button class="btn btn-primary" type="button">Sign Up</button>
</div>
</div>
<!-- secondcard -->
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
<!-- thirdcard -->
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</section>
<!-- 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>
Let me know if this will work for you
Must sure that you have implemented bootstrap cdn link in the head of your
webpage.
<!doctype html>
<html lang="en">
<head>
<!-- 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">
<title>Hello, world!</title>
</head>
<body>
<!-- YOUR CODE HERE-->
</body>
Related
I am currently taking a course on Udemy and it is about Bootstrap, well the problem is that the course was released since 2018, and now while I am following along, there are a lots things that are not responsive. like text wont get the size assigned to it, or the front assign to it. it is supper annoying.
if someone understand what is going on, please help!
The is not taking the parameters assigned to it
#title{
background-color:#FF4C68;
color: #fff;
}
body{
font-family: "Montserrat";
}
h1{
font-size:12rem;
line-height:1.5;
font-family:"Montserrat-Black";
}
h2{
font-size:3rem;
line-height:1.5;
font-weight:bold;
font-family:"Montserrat-bold";
}
h3{
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
p{
color:#8f8f8f;
}
.container-fluid{
padding:3% 15%;
}
.rotate{
transform: rotate(30deg);
}
/* mavigationbar */
.navbar{
padding-bottom:8.5rem;
}
.navbar-brand{
font-size:2.5rem;
font-weight:bold;
font-family:"Ubuntu"
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size:1.12rem;
font-family: "Montserrat-light"
}
/* Download buttons */
.Download-button{
margin:5% 3% 5% 0;
}
/* image tittle */
.title-image{
width:40%;
}
/* features-section */
#features{
padding:7% 15%;
}
.feature-box{
text-align:center;
padding:5%;
}
.icon{
color: #EF8172;
margin-bottom:2rem;
}
.icon:hover{
color: #FF4C68;
}
/* testimonial section */
#testimonials{
padding: 7% 15%;
text-align: center;
background-color:#EF8172;
color:#fff;
}
.testimonial-image{
width:55%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital#1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital#1&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat+Ubuntu" rel="stylesheet" > -->
<!-- bootstrap -->
<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">
<!-- awsomefont -->
<script src="https://kit.fontawesome.com/89569a1c7f.js" crossorigin="anonymous"></script>
</head>
<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 ml-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" class="btn btn-dark btn-lg download-button" ><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6 ">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check fa-4x"></i>
<h3 >Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class=" feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class=" feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
<!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em> -->
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
Your current layout appears to be responsive. Based on the limited col classes you have assigned.
However, your issue is not down to responsiveness (how it reacts to viewport changes) but styling. It is likely to do with the order of your stylesheets.
Your Bootstrap styles should be first, followed by your custom styles - CSS - Cascading Style Sheets - You are effectively adding styles on-top of the Bootstrap ones (which is why you will often run into specificity issues with Bootstrap).
What is currently happening is you custom styles are being loaded, then being overwritten by the Bootstrap stylesheet. You of course want this the other way around.
I would suggest something like this
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- bootstrap -->
<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">
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital#1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital#1&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat+Ubuntu" rel="stylesheet" > -->
<link rel="stylesheet" href="css/styles.css">
<!-- awsomefont -->
<script src="https://kit.fontawesome.com/89569a1c7f.js" crossorigin="anonymous"></script>
</head>
Maybe link your css after your bootstrap and see if it works.
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 taking the lesson in bootstrap card, and I have followed the whole story from my teacher, but the grid markup effect could not work.
I thought I was incorrect for what I have input, but I realized I wasn't.
I suppose to create the first two containers with 50% in the PAD and the 3rd container with 100%.
I added in the first 2 container and for the 3rd.
What I inputted is entirely the same from the lesson, but it could not work nicely as a pricing table.
Please kindly advice what I suppose to do.
Please kindly to see what I have input below in my codeply
https://www.codeply.com/p/uA7F2o9gyz
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;700&family=Ubuntu:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- css stylesheet -->
<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="css/styles.css">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/e2fafd992e.js" crossorigin="anonymous"></script>
<!-- Bootstrap Script -->
<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>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
</div>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
Your first card body div is outside the card div that's why you are facing this problem.
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
Your first .card-body is outside of the first card. It should be inside the card div, after the .card-header div like the others. The card structure should look like this:
<div class="card">
<div class="card-header">
//card header content here
</div> //close card-header div
<div class="card-body">
//card body content here
</div> //close card-body div
</div> //close card div
Just cut-and-paste the entire .card-body block right after <h3>Chihuahua</h3></div>
This question already has answers here:
How can I override Bootstrap CSS styles?
(14 answers)
Closed 2 years ago.
I wanted to remove default padding-left and padding-right in container-fluid. I am using bootstrap 5.
Refer to the screenshot. I have disabled by default padding-left and padding-right and then I have got my desired result using chrome dev. tools. I don't want to use "!important" in CSS file.
I have also tried no-cutter class with container-fluid and I have also tried g-0 to remove gutters in container-fluid but still it doesn't work. Though "!important" in css file with
.container-fluid{
padding: 3% 15% !important;
}
did worked but I don't wanna use this solution. If there is any other way to resolve this issue using Bootstrap 5.
/*********************************TAG SELECTOR***************************/
h1{
font-family: 'Montserrat';
font-size: 3rem;
line-height: 1.5;
}
/*********************************CLASS SELECTOR***************************/
.navbar-brand, .nav-item{
margin-left: 10px;
}
.container-fluid{
padding: 3% 15% !important;
}
/*********************************ID SELECTOR***************************/
#title{
background-color: #ff4c68;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Added Ubuntu & Montserrat font from Google font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- Added CSS-->
<link rel="stylesheet" href="css/styles.css">
<!-- Added CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Added Javascript bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</head>
<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-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<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>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
<!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em> -->
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
The problem is that styles.css should follow bootstrap.min.css in the HEAD tag. Once this is done the .container-fluid padding override you've set will take precedence...
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Added Ubuntu & Montserrat font from Google font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- Added CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Added CSS-->
<link rel="stylesheet" href="css/styles.css">
</head>
https://codeply.com/p/3VrA65Nv72
Also see: How can I override Bootstrap CSS styles?
I follow some tutorial, and I can't get the correct result, because the padding doesn't work.
When I write padding: 3% 15%; then the top and bottom padding is added, but from the sides not.
I make exactly what the teacher, but it just doesn't work for me.
Have you an idea what's wrong with my code? Maybe cause I use the bootstrap 4.5 and in the lessons are the 4.0 version?
h1{
font-family: 'Montserrat', sans-serif;
size: 3rem;
line-height: 1.5;
}
#title{
background-color: #ff4c68;
}
.container-fluid{
padding: 3% 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<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>
</head>
<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 ml-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>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
<!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em> -->
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
You should add the "local" stylesheet link below the Bootstrap link (because Bootstrap has some default padding value).
In your head
<head>
<!-- your code -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- other links -->
</head>
You have first added your external CSS file and then you added a link for Bootstrap CSS which means your customized container-fluid class will be overwritten by container-fluid class of Bootstrap and because container-fluid class of Bootstrap has other values for padding-right and padding-left
/*Bootstrap class v4.6.0*/
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
your values for padding-right and padding-left won't be applied, but since it hasn't specified values for padding-top and padding-bottom, your own values will be applied.
In order to fix this as mentioned you should simply change place of your external CSS file with Bootstrap CSS link.
<head>
<!-- your code -->
<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="css/styles.css">
<!-- other links -->
</head>
Your problem in the use of padding.
Padding 25%; // All four paddings are 25%
Padding 25% 50%; // Top and bottom paddings are 25%, right and left paddings are 50%
Padding 25% 50% 75%; // Top padding is 25%, right and left paddings are 50%, bottom padding is 75%
Padding 25% 50% 75% 100%; // Top padding is 25%, right padding is 50%, bottom padding is 75%, left padding is 100%
I'm doing this classes right now, and I had the same issue as you have, and what I did, change the position of stylesheet. I just call my local css for the last item and then works.
You should add the css link at last after adding the external bootstrap file.
i am having problem with bootstrap and html not showing the intended page that i want , i will try to explain what i want briefly as this is my first ever post here
1.that the google fonts was not showing the fonts right
2.i tried to code the left div to make the paragraph in a box but i couldn't
supposed to be like this
instead i coded like the course that i am coding with and this is my code below in bootstrap and html and css
since i implemented the container fluid from bootstrap, the problems started to appear
maybe my eyes failing me and i cannot see the problem or maybe bootsrtap default values changed
here is the a compressed file with all the images and files needed if you wanted to try it out on your computer
https://drive.google.com/open?id=1582iahENUldh-xF-uNg1xaK7toKEcOqP
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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>
<!--google font not working here-->!<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Montserrat|Ubuntu" rel="stylesheet">
</head>
<body>
<section id="title">
<!-- 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="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-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 -->
<!--the problem might be here-->!
<div class="container-fluid">
<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>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
<!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em> -->
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
css:
#title{
background-color: #ff4c68;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-weight: normal;
}
.container-fluid{
padding: 3% 15%;
}
Always include custom stylesheet (style.css) at the end of head section like this
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Montserrat|Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
By doing this everything works fine. For font make sure that you install "Montserrat" font on your system or include google font link in your files either index.html or style.css. For heading make font-size: 1.5rem to font-size:3.5rem and font-weight:normal to font-weight:bold then it gives the same result as you want.