In the below example code, the footer is covering the body content.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
body {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar text-light">
<a class="navbar-brand" href="http://localhost/project/new_version/"><img src="" alt="Website" title="Website" width="30" height="30" loading="lazy" /> Website</a>
<ul class="navbar-nav self-first-ul">
Slogan
</ul>
<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 self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/919595951111"><i class="fab fa-whatsapp"></i> 9595951111</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:email#site.com"><i class="far fa-envelope"></i> email#site.com</a></li>
<li class="nav-item"><a class="nav-link" href="tel:9595950000"><i class="fas fa-mobile-alt"></i> 9595950000</a></li>
</ul>
</div>
</span>
</nav>
<div class="container p-3 bg-white rounded">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade d-none d-md-block d-lg-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C6</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C8</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C5</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="row">
<label for="Number">Search your transaction here <i class="far fa-hand-point-down far-blink"></i></label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
<div class="input-group-append">
<input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
</div>
</div>
</div>
<p>How to search specific transaction?</p>
</div>
<footer class="footer bg-primary">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Company Name</h3>
<p>Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph.
Some text to be shown. This will be a paragraph.</p>
</div>
<div class="col-md-3 ml-auto">
<h3>Links</h3>
<ul class="list-unstyled footer-links">
<li>Home</li>
<li>Categories</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Refund Policy</li>
</ul>
</div>
<div class="col-md-4">
<h3>Dial Sales & Support</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_phone.'" title="Dial '.$website_phone.'"> '.$website_phone.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_mobile.'" title="Dial '.$website_mobile.'">'.$website_mobile.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="https://wa.me/91'.$website_wamobile.'" title="Whatsapp '.$website_wamobile.'">'.$website_wamobile.'</a></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <strong></strong> '.$website_email.'</p>
<p><i class="fa fa-calendar-check-o" aria-hidden="true"></i><strong></strong> Monday to Saturday</p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <strong></strong> 10am to 6pm</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
Website Slogan
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
What actually I want is, the footer should always be in the bottom. Like if there are long body content (scrollable) then footer should be in last. But if the content is very few, finishes in one/two line the footer should be in bottom last. No space after that.
Using Flexbox
$("#add").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
});
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background:#fe5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>
Related
I know this seems to be a common issue - but I just cant get it to work!
I recently (stupidly) renamed my bootstrap.css file, as I had introduced a new one (from bootswatch). My render body content now overlaps the footer (even though I have re-renamed the bootstrap.css file. Everything else seems to work OK. I am using Bootstrap v5.1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Suplizer</title>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/Suplizer.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
#* <link rel="stylesheet" href="~/lib/bootstrap/dist/css/pulse.css" />*#
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Suplizer</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Suppliers" asp-action="Index">Suppliers</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Documents" asp-action="Index">Documents</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Questions" asp-action="Index">Questions</a>
</li>
#*<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SupplierQuestions" asp-action="Index">Supplier Questions</a>
</li>*#
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - Suplizer - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Here is my layout file
Thanks in advance for any help
Reading other solutions - I have tried...
Removing the reference to the site.css file in the layout file
Using the new bootstrap swatch
Putting around the footer
#footer{background: #404040;padding: 0 0 30px 0;color: #fff;font-size: 14px}#footer .footer-newsletter{padding: 50px 0;background: #404040}#footer .footer-newsletter h4{font-size: 24px;margin: 0 0 20px 0;padding: 0;line-height: 1;font-weight: 600}#footer .footer-newsletter form{margin-top: 30px;background: #fff;padding: 6px 10px;position: relative;border-radius: 50px}#footer .footer-newsletter form input[type="email"]{border: 0;padding: 8px;width: calc(100% - 140px)}#footer .footer-newsletter form input[type="submit"]{position: absolute;top: 0;right: 0;bottom: 0;border: 0;background: none;font-size: 16px;padding: 0 30px;margin: 3px;background: #e96b56;color: #fff;transition: 0.3s;border-radius: 50px}#footer .footer-newsletter form input[type="submit"]:hover{background: #e6573f}#footer .footer-top{background: #3b3b3b;border-top: 1px solid #474747;border-bottom: 1px solid #474747;padding: 60px 0 30px 0}#footer .footer-top .footer-info{margin-bottom: 30px}#footer .footer-top .footer-info h3{font-size: 18px;margin: 0 0 20px 0;padding: 2px 0 2px 0;line-height: 1;font-weight: 700}#footer .footer-top .footer-info p{font-size: 14px;line-height: 24px;margin-bottom: 0;font-family: "Raleway", sans-serif;color: #fff}#footer .footer-top .social-links a{font-size: 18px;display: inline-block;background: #545454;color: #fff;line-height: 1;padding: 8px 0;margin-right: 4px;border-radius: 50%;text-align: center;width: 36px;height: 36px;transition: 0.3s}#footer .footer-top .social-links a:hover{background: #e96b56;color: #fff;text-decoration: none}#footer .footer-top h4{font-size: 16px;font-weight: bold;color: #fff;text-transform: uppercase;position: relative;padding-bottom: 12px}#footer .footer-top .footer-links{margin-bottom: 30px}#footer .footer-top .footer-links ul{list-style: none;padding: 0;margin: 0}#footer .footer-top .footer-links ul i{padding-right: 2px;color: #ec7f6d;font-size: 18px;line-height: 1}#footer .footer-top .footer-links ul li{padding: 10px 0;display: flex;align-items: center}#footer .footer-top .footer-links ul li:first-child{padding-top: 0}#footer .footer-top .footer-links ul a{color: #fff;transition: 0.3s;display: inline-block;line-height: 1}#footer .footer-top .footer-links ul a:hover{color: #e96b56}#footer .footer-top .footer-contact{margin-bottom: 30px}#footer .footer-top .footer-contact p{line-height: 26px}#footer .copyright{text-align: center;padding-top: 30px}#footer .credits{padding-top: 10px;text-align: center;font-size: 13px;color: #fff}
<link href="https://cdn.jsdelivr.net/npm/boxicons#latest/css/boxicons.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="footer"> <div class="footer-newsletter"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4>Our Newsletter</h4> <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p> </div> <div class="col-lg-6"> <form action="" method="post"> <input type="email" name="email"><input type="submit" value="Subscribe"> </form> </div> </div> </div> </div> <div class="footer-top"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 footer-links"> <h4>Useful Links</h4> <ul> <li><i class="bx bx-chevron-right"></i> Home</li> <li><i class="bx bx-chevron-right"></i> About us</li> <li><i class="bx bx-chevron-right"></i> Services</li> <li><i class="bx bx-chevron-right"></i> Terms of service</li> <li><i class="bx bx-chevron-right"></i> Privacy policy</li> </ul> </div> <div class="col-lg-3 col-md-6 footer-links"> <h4>Our Services</h4> <ul> <li><i class="bx bx-chevron-right"></i> Web Design</li> <li><i class="bx bx-chevron-right"></i> Web Development</li> <li><i class="bx bx-chevron-right"></i> Product Management</li> <li><i class="bx bx-chevron-right"></i> Marketing</li> <li><i class="bx bx-chevron-right"></i> Graphic Design</li> </ul> </div> <div class="col-lg-3 col-md-6 footer-contact"> <h4>Contact Us</h4> <p> A108 Adam Street <br> New York, NY 535022<br> United States <br><br> <strong>Phone:</strong> +1 5589 55488 55<br> <strong>Email:</strong> info#example.com<br> </p> </div> <div class="col-lg-3 col-md-6 footer-info"> <h3>About DevVE</h3> <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p> <div class="social-links mt-3"> <i class="bx bxl-twitter"></i> <i class="bx bxl-facebook"></i> <i class="bx bxl-instagram"></i> <i class="bx bxl-linkedin"></i> </div> </div> </div> </div> </div> <div class="container"> <div class="copyright"> © Copyright <strong><span>DevVE</span></strong>. All Rights Reserved </div> <div class="credits"> Designed by SalvadorDevVE </div> </div>
</footer>
Try this out - Bootstrap 5 Footer
I am trying to display three items in a bootstrap list group.
Here, in the middle, if the content is larger than it is currently making the content on the left overflowed.
The code i have came up with so far is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
</ul>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
How to keep that content as it is without changing its layout when the text content is large?
I wanted to achieve this using the pure bootstrap.
Please try white-space: nowrap for the font-weight-light class
You just need to add class="text-nowrap" in those elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light text-nowrap">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light text-nowrap">05-19-2022 4:20</p>
</li>
</ul>
<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://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I've made a full screen carousel on a responsive web-page. And added a navbar to the carousel. But this navbar have problems with responsiveness. When I shrink the web site (responsive), the navbar creats a problem about responsiveness: words are nested. How can I fix this? When I add something, I do not see anything. The latter under the carousel. Can you help me?
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.navbar {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
border-radius: 3px;
z-index: 1090;
}
<!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">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://image.ibb.co/bQEXKz/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ANASAYFA
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BİZ KİMİZ?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÜRÜNLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HİZMETLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RESİM GALERİSİ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İLETİŞİM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide fixed-top " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container">
<div class="hizmetlerimiz-top text-center">
<p>NELER YAPIYORUZ?</p>
<h3>HİZMETLERİMİZ</h3>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="hizmetlerimiz-content">
<div class="row">
<div class="col-sm-3">
<div class="item-logo">
<img src="images/index.jpg" alt="">
</div>
<h4>RASCHEL ÖRME MAKİNALARI</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/cozum.jpg" alt="">
</div>
<h4>AYRIŞTIRICI ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/levent.jpg" alt="">
</div>
<h4>LEVENT ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
<i class="fas fa-plus"></i>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/boya.jpg" alt="">
</div>
<h4>BOYAHANE</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
</div>
</div>
</div>
<!-- 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>
Remove fixed-top class from the <div id="carouselExampleIndicators">.
Replace this:
<div id="carouselExampleIndicators" class="carousel slide fixed-top" data-ride="carousel">
With this:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
I have the following todolist web app, and I'm trying to space the two inputs and the button evenly. But I can't figure out by inspecting the elements in the form what element has a margin or padding that pushes the button further down. The form has three elements two inputs and one button. I want the three evenly spaced. If you can let me know how to fix this appreciated.
Link to webapp: http://pctechtips.org/apps/todo/
Code:
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
In your class .add-item you are applying a font-size in EM units which I believe is the problem. The way font sizes are calculated when EM is specified can cause inconsistent 'stacking' issues where font sizes compound up or down far more than expected.
Removing this declaration, or changing it from 2em to 2rem resolves the issue.
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2rem;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
</div>
</div>
That's because form.mb-4 has a computed line-height:96px. Resetting it to 1.5rem fixes the issue :
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
form.mb-4 {
line-height: 1.5rem;
}
<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
It seems that the .add-item class manipulates the button.
You can try
css:
.test {
font-size: 1rem;
}
.test button {
font-size: 1em;
}
Html (wrap content with a ):
<div class="test">
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>
My carousel is a 1200*500 dimension one. When I put an image of the same dimension , its not taking the full width of the carousel , just partially.
I tried using the "fill" class in my html code but its not working , I also tried with this css code:
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
Nothing seems to be working. Any help please
HTML Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/18.jpg" alt="First slide">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://www.jquery2dotnet.com/">Registration</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
CSS code:
.main-text
{
position: absolute;
top: 80px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block
{
min-width: 170px;
line-height: 26px;
}
.btn-clear
{
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover
{
color: #000;
background-color: #FFF;
}
#carousel-example-generic
{
margin-top: 80px;
min-height: 100px;
min-width: 80%;
}
I did this example for you (it's a bit simple, but will help you).
The change I made, compared to yours, is that I am now adding the image as background in a DIV, not in an image element. Thus, we can control the display, regardless of the size the image has.
.carousel-img {
width: 100%;
height: 400px;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I have helped you in any way