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>
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'm working with HTML, CSS and Bootstrap4. I need a navbar that should be fixed when I scroll. I did everything but after a little scroll, the navbar again won't fixed. I wonder if there is any way to solve this problem with bootstrap but if you can't, just tell me what to do with Css. Thanks
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
<meta name="description" content="H&M clothing shop"/>
<meta name="author" content="Ali Bolouki"/>
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg"/>
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
</main>
<!--Bootstrap4-->
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Please run my code and scroll down to see what I'm trying to say.
The body and html height shouldn't be 100%. It looks like that is issue causing the sticky nav to only stick for part of the page. I added a border and some extra space to demonstrate how your sticky div alternates between position: relative and position: fixed depending on the scroll position in the body:
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
To solve this, simply remove the height value:
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
According to w3schools, sticky is defined as:
The element is positioned based on the user's scroll position A sticky
element toggles between relative and fixed, depending on the scroll
position. It is positioned relative until a given offset position is
met in the viewport - then it "sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from
version 6.1 with a -webkit- prefix.
CSS Position Property
Full code snippet with the border and extra space to demonstrate the result:
body,
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!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">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital#1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" 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 mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<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/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
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>
I want to have list items with a layout like below, with a circle that has an image, at right of the circle a title, the date of the post and then the category of the post. And at right of the list item should appear the button.
I have this code to achieve this layout using flexbox: http://jsfiddle.net/muLh5v4n/2/. But its not working properly, the title, post date and category are not at the right of the image, are below the image.
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group list">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group list_search">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control shadow-none search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<div class="post-info">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
</li>
<li class="list-group-item">item2</li>
<li class="list-group-item">item3</li>
<li class="list-group-item">...</li>
</ul>
</div>
</div>
</div>
</div>
This is another aproach.
ul {
list-style-type: none;
width: 500px;
border: 1px solid gray;
margin: 0;
padding: 0;
}
.picture_round{
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
margin-left: 20px;
object-fit: cover;
object-position: center;
display: block;
}
.dsp_flex {
display: flex;
justify-content: center;
align-items: center;
}
.middle_section{
flex: 1;
text-align: left;
}
ul li button{
margin-right: 20px;
}
ul li{
padding: 10px 0px;
border-bottom: 1px solid blue;
}
.title {
text-transform: uppercase;
font-weight: bolder;
}
.category{
border: 1px solid gray;
border-radius: 10px;
display: inline-block;
padding: 5px 2px;
}
<ul>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">title</div>
<div class="description">lorem ipsum ipsum</div>
<div class="category"> category </div>
</div>
<button>Button</button>
</div>
</li>
<li>
<div class="dsp_flex">
<img src="https://ph-test-11.slatic.net/p/4/yd-m6-kids-electric-ride-on-toy-car-4-wheels-red-6663-9385349-68cc46bb43f6fc801db86e9994dd6dba-catalog.jpg_340x340q80.jpg_.webp" class="picture_round">
<div class="middle_section">
<div class="title">titletitle title</div>
<div class="description">lorem ipsum ipsum lorem ipsum ipsum</div>
<div class="category"> categorycategory </div>
</div>
<button>Button</button>
</div>
</li>
</ul>
You can try using this; you can further style the elements; but basically this component should display as you intend. Also this is using only Bootstrap Classes, custom css is only for the example.
.list-item {
max-width: 450px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="list-item border d-flex align-items-center">
<div><img src="https://via.placeholder.com/100" class="rounded-circle" alt=""></div>
<div class="ml-2">
<h3>Title</h3>
<p>some-text</p>
<span>Span</span>
</div>
<div class="ml-auto mr-2"><button>Button</button></div>
</div>
Bootstrap 4 has a class called .flex-row that we can use.
Lets do this using only Bootstrap classes and flex.
1. Add flex-row class to the list-group-item.
2. Add d-flex to post-info.
3. Place the text into a d-flex flex-column div.
<li class="list-group-item d-flex flex-row align-items-center">
<div class="post-info d-flex">
<img src="http://placehold.jp/3d4070/ffffff/75x75.png?css=%7B%22border-radius%22%3A%2215px%22%7D">
<div class="d-flex flex-column">
<h3>Title of the post</h3>
<span>post date</span>
<span>Categorqy of the post</span>
</div>
</div>
<div class="post-button ml-auto">
<button>Read</button>
</div>
JSFiddle: http://jsfiddle.net/muLh5v4n/13/
You can later on use Bootstraps built in padding classes to make it space out nicely.
I have some list items inside a modal and I want that each list item have the same space or magin between. So Im using margin-bottom: 1rem and margin-right: 1rem, but its not working. For example in larger devices I want to have 3 columns but it appears only two columns with a very large margin in between. Also in medium devices I want 2 columns but with the same margin right and bottom between list items but its not working, the columns have a very large margin in between.
Html:
<a data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<ul class="categories-list">
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/tags.svg"/>
<a class="">All Options</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/video.svg"/>
<a class="">Option1</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/clubbing.svg"/>
<a class="">Option2</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/concert.svg"/>
<a class="">Option3</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/conference.svg"/>
<a class="">Option4</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/exposition.svg"/>
<a class="">Option5</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/certificate.svg"/>
<a class="">Option6</a>
</li>
<li class="col-lg-4 col-md-6 col-sm-12">
<img src="{{ URL::to('/') }}/img/categories/literature.svg"/>
<a class="">Option7</a>
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS
.categories-list{
display: flex;
flex-wrap:wrap;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
}
.categories-list li{
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 1rem;
background-color: yellow;
border-radius: 5px;
margin-right: 1rem;
}
.categories-list img{
width: 20px;
height: 20px;
}
Your categories-list class, which has the margins you want, is being applied to the <ul> element instead of each <li> element. This is only going to have an effect on the entire list.