I am trying to create carousel responsive image inside the index home page which are being displayed inside the common layout page. But when I reduce the height carousel-item div, full image is not being showed in index html. How can I show the full image as responsive , even if I reduce the height of carousel-item div.?
My code given below
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - MyCompany</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container-fluid icon-top py-4 px-5">
<div class="row">
</div>
</div>
<header id="header">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="body-container">
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container" id>
© 2021 - MyCompany - <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>
<script src="~/js/all.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Index.cshtml
#{
ViewData["Title"] = "Home Page";
}
<section id="home-heading">
<div id="MyCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item carousel-image-1 active">
</div>
<div class="carousel-item carousel-image-2">
</div>
<div class="carousel-item carousel-image-3">
</div>
</div>
<a class="carousel-control-prev" href="#MyCarousel" 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="#MyCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- INFO SECTION -->
<section id="info" class="py-3>
<div class=" container">
<div class="row">
<div class="col-md-8 align-self-center">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate eveniet blanditiis incidunt iusto
corrupti illum cum laudantium ex sequi amet. ssfsdfs fjjerhehr uiewruhweuiruiewruyhyuewiry iweuyr
ryewiuryiweuy. uieeryewi iuweriwe yb 7weyr7ewy87r7ywe8ry8wer8 we87r y87we78r7we8r
7we87rwe87r87wer8werweuewof
w8ueuwe88ur9we8r </p>
Learn More
</div>
<div class="col-md-4">
<img src="img/laptop.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
Site.css
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
#body-container {
/* */
top: 0;
bottom: 0;
right: 0;
left: 0;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
/* Vertically center the text there */
}
.icon-top {
background-color: chocolate;
}
.navbar .nav-link {
font-size: 14px !important;
text-align: right !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.navbar .nav-item.active {
border-left: #444 3px solid;
}
.carousel-item {
height: 800px;
}
.carousel-image-1 {
background: url('../img/banner-1.jpeg');
background-size: cover;
}
.carousel-image-2 {
background: url('../img/banner-2.jpeg');
background-size: cover;
}
.carousel-image-3 {
background: url('../img/banner-3.jpeg');
background-size: cover;
}
With Many Thanks
Pol
Add this to your Layout page.
#RenderSection("style", required: false)
Now add your Carousel code to any View page. under#section style{ "your bootstrap carousel code"} so for that, you will successfully show your carousel where you want. also, the carousel fits the full image as responsive.
#section style{
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img1" />
<div class="carousel-caption">
<h3>Image 1</h3>
<p>A happy image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img2" />
<div class="carousel-caption">
<h3>Image 2</h3>
<p>A new image</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" style="background-color: gray; height: 550px; width: 100%;" src="~/images/family1.jpeg" alt="Img3" />
<div class="carousel-caption">
<h3>Image 3</h3>
<p>An old image</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
}
Related
I have a problem with my html website. I am currently using Bootstrap-5. When I change the slides using carousel in website, there is white blanks keep appearing. How can I deal with this problem?
Here is my code!
HTML
<!doctype html>
<html lang="kr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>P&P</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">P & P</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav m-auto my-2 my-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Some Script
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
<li><a class="dropdown-item" href="#">Some script</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active"href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Some script</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="lemon_wp.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>đź‘‘</h5>
<h6>Some script<br>Other script</h6>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<section class="babies">
<div class="container py-5">
<div class="row py-5">
<class class="col-lg-5">
<h1></h1>
</class>
</div>
</div>
</section>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar-brand{
font-size: 2rem;
color: black;
}
.navbar-brand:hober{
color: black;
}
.nav-link{
margin-right: 10px;
margin-left: 10px;
color: black;
text-transform: uppercase;
}
.nav-link:hover{
color: black;
}
.main{
background-color: lemonchiffon;
background-size: cover;
height: 100vh;
width: 100%;
background-position: 50% 50%;
}
.main h1{
font-size: 4rem;
font-weight: 700;
/*fontfamiliy*/
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item {
position:relative;
}
.carousel-item{
height: 100vh;
min-height: 300px;
background: no-repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.carousel-caption{
bottom: 35%;
padding-left: 100px;
padding-right: 100px;
color: black;
}
.carousel-caption h5{
font-size: 100px;
font-weight: 700;
}
.carousel-caption h6{
font-size: 60px;
font-weight: 600;
}
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
.carousel {
width:100% !important;
overflow: hidden !important;
right:0 !important;
}
.carousel-inner{
overflow:visible
}
I cannot really find the problem in my code.
The carousel example that I use is from the bootstrap official site.
I don't know why this is happening but you can try this it works on your code
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="a.lpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="b.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
<div class="carousel-item">
<img src="c.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Some script<br>Some script</h5>
<h6><br>Some script</h6>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
and you don't need this code on your css you have it by default in bootstrap
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
dear when you add carousel slider it auto append white arrow for slider movement to left right its part of carousel default css and in your css you had also added the arrow by the code given below
.carousel-control-next-icon:after{
content: '>';
font-size: 55px;
color: black;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: black;
}
try to comment it so it will remove the black arrow
or use carousal javacript method to remove the black arrow
I'm having an issue regarding the CSS while applying to the UL and LI Tag in HTML UI designing.
My CSS Code
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
<ul class="jobs">
<div th:each="indTypeProduct :${indTypeProducts}">
<li>
<div class="card" id="wrapper" style="align-items: center;">
<p th:text="${indTypeProduct}" />
</div>
</li>
<br>
</div>
</ul>
Could you please anyone help me on this issue?
Check the view source
Updated Code Please have a look and let me know where I'm going wrong and let me know, I simply want all my result should be align and have in same line.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
#wrapper {
margin-left: 50px;
margin-right: 20px;
padding: 12px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: cursive;
}
.price {
color: grey;
font-size: 24px;
}
.card a {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
text-decoration: none;
}
.card a:hover {
opacity: 0.5;
}
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/home">Cart Studio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="/home">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="/product">Product</a>
</li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<div>
<h4>
<p style="margin-left: 15px"> Hello test#gmail.com Greetings!!</p>
</h4>
</div>
<hr style="color: black;">
<div id="carouselExampleIndicators" class="carousel slide"
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">
<div class="carousel-item active">
<img class="d-block w-100" src="/uploads/images.jpg"
alt="First 1 slide" width="100" height="350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="100" height="350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="300" height="350" alt="Third slide">
</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>
<hr style="color: black;">
<ul class="jobs">
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >retail</p>
</div>
</li>
<br>
</div>
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="#{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<p >mobile</p>
</div>
</li>
<br>
</div>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
One thing I have added here <ul class="row" style="width: 400px"> and it fixed the issue and width for not getting horizonatl scroll bar.
I have been trying to figure out why my navbar doesn't expand itself when in mobile view, rather the menu ends up occupying the following section. I have tried playing around with static/fixed navbars, adding padding to the body, to no avail.
I'm also not sure about where I should be including my container-fluid. I've seen examples of it wrapping the entire navbar, while others only wrap the brand.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Coins 4 Clothes</title>
<!-- Stylesheets and libraries -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<!-- Bootstrap scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-md-brand" href="">
<img class="img-fluid c4clogo" src="images/output-onlinepngtools.png" alt="Coins 4 Clothes logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Log in</a>
</li>
</ul>
</div>
</Nav>
<hr class="hr-nav"></hr>
<!-- Carousel section -->
<div id="carouselExampleIndicators" class="carousel" 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">
<div class="carousel-item active">
<div class= "headings-slide1">
<h2 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="First slide">
</div>
<div class="carousel-item">
<div class= "headings-slide2">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h2 class="headings-slides">Help the needy.</h2>
<h3 class="headings-slides">Earn Bitcoins.</h3>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<div class= "headings-slide3">
<h3 class="headings-slides">De-clutter your closet.</h3>
<h3 class="headings-slides">Help the needy.</h3>
<h2 class="headings-slides">Earn Bitcoins.</h2>
<hr class="hr-slides"></hr>
</div>
<img class="d-block w-10" src="..." alt="Third slide">
</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>
</div>
hello world
</body> ```
and here is the CSS
Below is the CSS:
font-size: 30px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* Navigation Bar */
.navbar {
background-color: #FFFFFF;
text-align: center;
height: 70px;
}
.navbar-md-brand {
height: 70px;
width: 276px;
padding-top: 10px;
}
.nav-item {
padding: 18px;
}
.nav-link {
font-family: "ubuntu",sans-serif;
font-weight: 500;
font-size: 1.2rem;
}
.navbar-light .navbar-nav .nav-link .navbar-toggler-icon {
color: #21bf73;
}
/* Carousel */
.carousel-control-prev {
margin-left: -100px;
}
.carousel-control-next {
margin-right: -100px;
}
/* Download Buttons*/
.download-button {
margin: 5% 3% 5% 0;
}
.headings-slides{
padding-left: 20px;
}
.hr-slides{
margin-top: 20px;
margin-left: 30px;
}
.hr-nav{
margin-top: inherit;
border-top: 3px solid black;
}
h2{
color: #478559;
font-family: "ubuntu",sans-serif;
}
There are a couple of ways to fix this. Since you are using a custom .navbar-md-brand, the simplest way is to set it like this:
.navbar-md-brand {
height: 70px;
max-width: 276px;
flex-grow: 1; /* let it "spread" until max-width */
padding-top: 10px;
}
For an ideal scenario, you need to check these breakpoints and "rewrite" .navbar-md-brand for corner cases, if you need
https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpoints
Or you can stay with the "official" way of doing things and use some of the existing classes like class="navbar-brand mb-0" https://getbootstrap.com/docs/4.4/components/navbar/#brand
Either way, hope these tips help you.
How do I put some texts inside this carousel? I have to put some texts like some info about something, a big title and also the menu on top of it. How do I do that? I looked for some answers here but none of them worked for me, I tried to change some display to relative and absolute but didn't work.
It's like, how do I write an h1 and move it freely over the image of the carousel?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" 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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="carousel-menu">
<div id="carouselExampleIndicators" class="carousel slide" 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">
<div class="carousel-item active">
<img class="d-block w-100" src="../Site sem nome 2/gd1111.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/tw11111.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../Site sem nome 2/rol111.jpg" alt="Third slide">
</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>
</div>
Reference:
https://bootsnipp.com/snippets/featured/bootstrap-carousel-with-text
html
------------
<div class="container">
<div class="row">
<!-- Carousel -->
<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">
<div class="item active">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to <strong>LOREM IPSUM</strong></span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="https://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide">
<!-- Static Header -->
<div class="header-text hidden-xs">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to LOREM IPSUM</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
<div class="">
<a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
</div>
</div><!-- /header-text -->
</div>
</div>
<!-- Controls -->
<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><!-- /carousel -->
</div>
</div>
------
css
------
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
background-color: #2980b9;
padding: 10px;
}
.header-text h3 span {
background-color: #000;
padding: 15px;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
now you can use v4.0.0-beta please refer this link
https://getbootstrap.com/docs/4.0/components/carousel/#slides-only
Try like this,im used for the bootstrap 3(just an example )
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
<p>
Some text which is vertically, horizontally centered in image
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/300x200" class="full-width" />
<div class="carousel-caption">
<div class="full-width text-center">
Some text which is vertically, horizontally centered in image
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example" 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" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Im creating a website for a friend and when I add an image it just wont go to the bottom, I have literally tried everything from background-position: left bottom; to padding-bottom:0px to everything else, it just has a huge gap under it of the background. I have tried multiple images so it isn't just my image. I am using bootstrap and below ive put my code plus the custom css code..
HTML
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase"><br>
<div class="col-md-8">
<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">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</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"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer"><br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
#welcome_placeholder, .welcome_placeholder {
background-color: #5bc0de;
height:300px;
border-radius:6px;
width:699px;
color:white;
padding-top:1px;
padding-left:28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left:20px !important;
padding-top:10px !important;
padding-right:20px !important;
padding-bottom:20px !important;
}
p {
font-size:14px !important;
}
.spaceform {
margin-top:8px;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
padding-left:0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image:url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
#welcome_placeholder,
.welcome_placeholder {
background-color: #5bc0de;
height: 300px;
border-radius: 6px;
width: 699px;
color: white;
padding-top: 1px;
padding-left: 28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left: 20px !important;
padding-top: 10px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
}
p {
font-size: 14px !important;
}
.spaceform {
margin-top: 8px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
padding-left: 0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image: url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase">
<br>
<div class="col-md-8">
<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">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</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"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer">
<br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>
The image is aligned bottom of the body. Which it is. The body ends where the image finishes. If you make the footer div bigger you will see that the image goes to the bottom (bottom of the div).
The <body> contains all the content so the image goes at the end of the content NOT the bottom of the browser window. If you want the image to always be at the bottom of the browser window no matter what then you should use position: absolute; bottom:0;
How about adding this to body:
height:100vh;
See here: https://jsfiddle.net/1zq13grk/