I am using a dark background footer. Because some pages don't have enough content to fill the entire browser's viewport, I am getting an ugly white band below it.
How do I get the footer to go to the bottom of the viewport on pages with little content? But on pages with more content than the viewport, the footer should only appear after scrolling down past that content.
I've tried fixed-bottom and sticky-bottom of Bootstrap 5, but these hide the content if there is more content or the browser viewport is smaller.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Title</h1>
<p>Content</p>
</div>
<footer class="bg-black text-white">
<div class="container">
<p>This should be at the bottom of the page</p>
<p>This should be no white band below this</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>
The easiest way is to use a flexbox layout. You can put the appropriate classes (d-flex flex-column vh-100) on the body, and then use mt-auto to force the footer to the bottom. Finally, place overflow-auto on the container so the rest of the page can scroll as needed.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
<div class="container overflow-auto">
<h1>Title</h1>
<p>Content</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
<p>Content</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Content</p>
</div>
<footer class="bg-black text-white mt-auto">
<div class="container">
<p>This should be at the bottom of the page</p>
<p>This should be no white band below this</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>
<body class="d-flex flex-column vh-100">
<div class="container overflow-auto">
<h1>Title</h1>
<p>Content</p>
</div>
<footer class="bg-black text-white mt-auto">
<div class="container">
<p>This should be at the bottom of the page</p>
<p>This should be no white band below this</p>
</div>
</footer>
</body>
EDIT:
If you only want the footer to be visible after scrolling large content just change vh-100 to min-vh-100
https://codeply.com/p/273L716IHN
Use min-height.
See the snippet below.
body {
min-height: 100vh;
}
.content {
min-height: calc(100vh - 64px); /* 64px is the height of your footer */
}
footer p:last-child {
margin-bottom: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body>
<div class="container content">
<h1>Title</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<footer class="bg-black text-white">
<div class="container">
<p>This should be at the bottom of the page</p>
<p>This should be no white band below this</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>
EDIT
const footerHeight = $("footer").height();
$(".container.content").css("min-height", "calc(100vh - " + footerHeight + "px)");
body {
min-height: 100vh;
}
footer p:last-child {
margin-bottom: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="container content">
<h1>Title</h1>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<footer class="bg-black text-white">
<div class="container">
<p>This should be at the bottom of the page</p>
<p>This should be no white band below this</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
Related
I am trying to use bootstrap-datetimepicker for bootstrap 4 but when i use it in accordion. it is not showing up all of its box . The box for selecting date is under the card body. I tried positioning but not succeeded. I don't know about how to fix it ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous"
/>
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div class="container">
<div style="position: relative" id="global-container">
<div style="position: relative; z-index: 1" id="container-1">
<div style="position: relative; z-index: 50" id="content-1">
<div class="input-group date datetimepicker" id="d1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d1" value="01.01.1992" />
<div class="input-group-append" data-target="#d1" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative; z-index: 2" id="container-2">
<div style="position: relative; z-index: 2" id="content-2">
<div class="input-group date datetimepicker" id="d2" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d2" value="01.01.1992" />
<div class="input-group-append" data-target="#d2" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date datetimepicker" id="d3" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d3" value="01.01.1992" />
<div class="input-group-append" data-target="#d3" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".datetimepicker").datetimepicker({
format: "DD.MM.YYYY",
locale: "tr",
});
});
</script>
</body>
</html>
codepen : https://codepen.io/mhdikmen0/pen/dyzqJbr
I'm not sure why you've applied z-index values to the surrounding elements, but removing those seems to help.
Inline styles are rarely a good idea. I'd remove all those position rules, also.
$(document).ready(function() {
$(".datetimepicker").datetimepicker({
format: "DD.MM.YYYY",
locale: "tr"
});
});
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous"
/>
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<div class="container">
<div style="position: relative" id="global-container">
<div style="position: relative;" id="container-1">
<div style="position: relative;" id="content-1">
<div class="input-group date datetimepicker" id="d1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d1" value="01.01.1992" />
<div class="input-group-append" data-target="#d1" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative;" id="container-2">
<div style="position: relative;" id="content-2">
<div class="input-group date datetimepicker" id="d2" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d2" value="01.01.1992" />
<div class="input-group-append" data-target="#d2" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date datetimepicker" id="d3" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#d3" value="01.01.1992" />
<div class="input-group-append" data-target="#d3" data-toggle="datetimepicker">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script -->
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
</body>
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'm trying to align the items vertically inside a full-screen jumbotron.
This is my code
.jumbotron{
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
height: 100vh;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light" >
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
I use the border just to help me see the row. I'm looking for a solution to make this row has the same height as the jumbotron so I can make this text vertically in the center of the page.
What you can do is set the jumbotron and container elements to be display: flex, which will make the height of container and row to be 100% of the jumbotron. Then you set the row with the property align-items: center which will vertically center the content in row:
.jumbotron {
background: url("https://images.unsplash.com/photo-1499028344343-cd173ffc68a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&q=100") center center / cover no-repeat;
min-height: 100vh;
display: flex;
}
.container {
display: flex;
}
.row {
align-items: center;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<div class="row" style="border: 2px solid white;">
<div class="col-12 text-light">
<h1>Rin con Fuenteo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ratione, architecto similique autem commodi, suscipit vitae inventore provident eum ea unde, officia maiores dolore a voluptatum perspiciatis iste nam. Iste.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Hoping someone can help me here.
Messing around with Bootstrap 4 carousel, and I've found that if the content of the slide has an anchor tag in there somewhere, the carousel simply will not go to that slide. I would like to keep the design of having a button to link to other parts of the site on the slide, but i don't know how to implement it if the carousel won't slide to it.
I did extensive troubleshooting, and it's definitely the a tag causing this, as the same code minus the anchor tag around the button works perfectly fine.
Thanks for the help.
Code is as follows:
<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">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
I change the code,
obviously you can add anchor tag in bootstarp slider i just remove button and add class in anchor tag and then done.
You miss to close anchor tag.
never use a button as a child of anchor tag
Code is as follows:
<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">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
<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.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
try this
as you can see i have a image inside of a card, the image size is fixed and known but the card-text length might vary (short or too long).
the question is how can i prevent card height to scale up and force it to keep the height to just contain image and force the text to be wrapped and shorten.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
<div class="row">
<div class="col-9">
<p style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;" dir="rtl" class="card-text">
This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
</p>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/">
</div>
</div>
</div>
</div>
</div>
Using the property overflow:hidden and dynamically setting the height of the div solves the problem. Add onresize="myFunction()" and onload="myFunction()" to your body tag.
function myFunction()
{
var a=document.getElementById("image").height;
document.getElementById("test").style.height = a+"px";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<body onresize="myFunction()" onload="myFunction()">
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px;max-height:200px !important;">
<div class="row">
<div class="col-9" style="overflow:hidden;" id="test">
<p style="padding-top:20px;padding-bottom:20px;text-align:right;" dir="rtl" class="card-text">
This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long TextThis Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text This Is Long Text
</p>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/" id="image">
</div>
</div>
</div>
</div>
</div>
</body>
Hope this helps!!
You can set a fixed height and hide the overflowing content with overflow: hidden. To make things look pretty I also faded out the last few words
.truncate-text {
position: relative;
height: 4.6em; /* height of 3 lines of text */
overflow: hidden;
}
.truncate-text::after {
content: "";
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
width: 40%;
height: 1.7em;
position: absolute;
bottom: 0;
right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container body-content">
<div class="card text-center">
<div class="card-header" style="text-align:right;font-weight:bold;font-size:large" dir="rtl">
<p style="padding-right:20px;margin-bottom:0px">Post Header</p>
</div>
<div class="card-body" style="padding-top:0px;padding-bottom:0px;padding-right:0px">
<div class="row">
<div class="col-9" style="padding-top:20px;padding-bottom:20px;text-align:right;white-space: normal;">
<div class="truncate-text">
<p dir="rtl" class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos sint consequatur quidem in blanditiis ab, eaque ad, ducimus quasi laboriosam corporis dolores vero. Tempore explicabo veritatis suscipit ratione ut voluptatem aut consectetur rem eaque cum fuga, sunt distinctio dolorem ducimus ipsum nihil nostrum? Iusto accusamus voluptate culpa vero! Libero saepe necessitatibus, ipsum aut dolores nihil voluptates recusandae. Quibusdam repellendus iste aperiam quas voluptates! Pariatur veritatis inventore debitis sed facere ratione aliquid iste libero nobis ea voluptatum harum delectus, laborum quisquam at aut necessitatibus consequatur explicabo ipsum odio, facilis cum iusto quam! Corrupti soluta amet eligendi labore odit asperiores vel aliquid?
</p>
</div>
</div>
<div class="col-3">
<img class="img-fluid" src="http://fakeimg.pl/200/">
</div>
</div>
</div>
</div>
</div>