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.
Related
I know this has been asked many times, but I still cannot seem to fix my code. As you can see, I am copied the code directly from bootstrap, and I was able to get my buttons to appear, but they are not activating. Also, google fonts was directly imported, but it too is not changing my fonts as it should. It is remaining as default.
#title {
background-color: #FF4C68;
color: WHITE;
}
.container-fluid{
padding: 3% 15%;
}
/* H1 FONT FAMILY NOT WORKING */
h1 {
font-family: "Montserrat-Black";
font-size: 3.5rem;
line-height: 1.5;
}
h2 {
font-family: "Montserrat-Bold";
font-size: 3rem;
line-height: 1.5;
}
h3{
font-family: "Montserrat-Bold";
font-size: 1.5rem;
}
p{
color: #8F8F8F;
}
body {
font-family: "Montserrat";
}
/* NAVIGATION BAR */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: 'Ubuntu';
font-size: 2.5rem;
font-weight: bold;
color: yellow;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat-Light";
}
/* DOWNLOAD BUTTONS */
.download-button {
margin: 5% 3% 5%;
}
/* TITLE IMAGE */
.title-image {
width: 60%;
transform: rotate(45deg);
}
/* FEATURES SECTION */
#features {
padding: 7% 15%;
text-align: center;
padding: 5%;
}
/* CHANGE PADDING ABOVE IF FIRST BODY ISNT LOOKING RIGHT */
.icon{
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover{
color: #ff4c68;
}
/* TESTIMONIAL SECTION */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-img{
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- BOOTSTRAP SCRIPTS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<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:wght#100;400;900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS STYLESHEETS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<!-- C:\Users\dparr\Downloads\TinDog-Start-master\TinDog-Start-master\css\styles.css -->
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/849c3de797.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-primary btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands 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>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-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 fa-solid 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 fa-solid 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">
<div id="#testimonial-carousel" class="carousel slide" data-bs-ride="false" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<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>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" 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 TinDog</p>
</footer>
</body>
</html>
Remove # in the carousel ID id="testimonial-carousel" and everything will work
Also set the font style like this font-family: 'Montserrat', sans-serif;
/* TESTIMONIAL SECTION */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-img{
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP SCRIPTS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<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>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
1. What exactly is wrong with the buttons? Carousel
Read how to connect the 5 Budstrap correctly
The scripts should be plugged at the very bottom, before </body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
2. Connecting fonts
html:
<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,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
css:
font-family: 'Montserrat', sans-serif;
font-weight: 900;
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.
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 am trying to get my navbar buttons to line up on the right side.
I have tried:
class="pull-right" && "text-right"
I have also tried:
.btn-talent{
align-items: right
}
I am struggling. Any help would be greatly appreciated
I also put this in a codepen:
https://codepen.io/rob-connolly/pen/yLaGMyW[enter image description here]1
.btn-investors {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
.btn-talent {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite athletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<!-- --- Navbar Issue -- -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<!-- btn one issue -->
<button class="btn btn-talent" type="button">Talent</button>
<!-- btn two issue -->
<button class="btn btn-investors" type="button">Investors</button>
</nav>
<!-- Content -->
<!-- Footer -->
<!-- Footer -->
<footer class="container-flex bg-footerTop text-center text-lg-start">
<!-- Grid container -->
<div class="p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">About Us</h5>
<p>
Meetlete wants to give you the once in a lifetime opportunity to meet one of your favorite athletes. We are the first platform that allows fans to have personal one on one video calls with the biggest stars in sports. With every meetlete video call, we
donate a portion of the proceeds to the foundation of the athlete's choice. What makes this possible is the Meetlete secure and private platform. <br><br>Launching 2/14/21! <i class="far fa-heart"></i>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Address:</h5>
<span>Meetlete, Inc.<br>
Po Box 294<br>
La Mesa, CA 91944
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li>
Talent Sign Up
</li>
<li>
Fans Sign Up
</li>
<li>
Investor Info
</li>
<li>
Press
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 copyright" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-dark" href="https://meetlete.com">Meetlete.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
.
You should wrap your buttons with div. .navbar is a flexbox and uses justify: space-between rule. Here the buttons are flexbox items that's why they are spread inside nav.
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<div>
<button class="btn btn-talent" type="button">Talent</button>
<button class="btn btn-investors" type="button">Investors</button>
</div>
</nav>
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.