Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to build the testimonial section but it's not placing orderly, it's placing within the services section. here's the codepen link:
https://codepen.io/Razu381/pen/XQJVzg
here is the code:
<div class="section-testimonial">
<div class="row" >
<div class="col-md-2">
<h2> What people say about me</h2>
</div>
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>
just remove this css:
.section-services{
}
.services-overlay{
position: absolute;
top: 80%;
}
check out my answer:
#import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300,400|Lato:300i,400|Pacifico|Tangerine:400,700&display=swap');
body{
font-family: lato;
font-size: 20px;
}
.header-text{
font-size: 30px;
font-weight: bold;
word-spacing: 3px;
letter-spacing: 3px;
font-family: Abril Fatface;
color:#2ecc71;
}
.degrees{
font-size: 20px;
}
.top-nav{
font-size: 20px;
font-family: lato;
}
.navbar-light .navbar-nav .nav-link{
color: black;
margin: 3px;
}
.s-icon i{
margin:3px;
}
/*----about me section---*/
.section-about{
background: #f8f8f8;
}
.section-about h2{
font-family: Abril Fatface;
font-size: 40px!important;
letter-spacing: 3px;
word-spacing: 4px;
}
.section-about h2{
margin-top: 100px;
}
h2:after {
display: block;
width: 100px;
height: 3px;
background-color: #2ecc71;
content: "";
margin-top: 10px;
margin-bottom: 10px;
}
.section-about p{
margin-top: 30px;
}
/*----services section---*/
.section-services .card{
background-color: #2ecc713d;
}
.section-services .card-header{
background-color:#2ecc71;
text-align: center;
margin:5px 0;
}
.section-services h2{
font-family: Abril Fatface;
font-size: 40px!important;
letter-spacing: 3px;
word-spacing: 4px;
position: absolute;
top: 10%;
right: 50%;
text-transform: uppercase;
}
.section-services h2:after{
width: 220px;
}
.section-services p{
text-align: center;
}
.section-services .card-body img{
max-width: 100%;
text-align: center;
display: block;
height: 150px;
width: 50%;
margin: 0 auto;
}
/*------section-testimonial---*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>homw</title>
<script src="https://kit.fontawesome.com/7ea1edf4c8.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lato|Pacifico|Tangerine&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/367919f9b0.js"></script>
<style>
.carousel-item{
height: 100vh;
}
.carousel-item img{
height: 100vh;
object-fit:cover;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" style="font-family:Pacifico;font-size: 30px;color: #2ecc71;" href="#">DR. S. Faruqi</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<div class="navbar-nav mx-auto top-nav" >
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About Me</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link " href="#">Testimonials</a>
<a class="nav-item nav-link " href="#">Chembers</a>
</div>
<span class="s-icon">
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
<i class="fab fa-youtube-square fa-2x"></i>
</span>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 100vh;position: relative;">
<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 src="https://source.unsplash.com/random" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/2" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/3" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://source.unsplash.com/random/4" class="d-block w-100" alt="...">
</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 class="section-about">
<div class="container">
<div class="row">
<div class="col-md-5">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
</div>
<div class="col-md-7">
<img src="https://source.unsplash.com/random/22" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="section-services "style="position:relative ;" >
<img src="https://source.unsplash.com/random/5.png" alt="" style="width: 100%;height: 400px;">
<h2>Services </h2>
<div class="container">
<div class="services-inner">
<div class="row services-overlay ">
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/6" alt="" class=" card-img-top " >
<h4 class="card-header">Primary Treatment</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/7" alt="" class="card-img-top " >
<h4 class="card-header">Primary Injury</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/8" alt="" class=" card-img-top " >
<h4 class="card-header">Vaccination</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/9" alt="" class=" card-img-top " >
<h4 class="card-header">Health Advice</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/10" alt="" class=" card-img-top " >
<h4 class="card-header">Childern care</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card">
<div class="card-body">
<img src="https://source.unsplash.com/random/11" alt="" class=" card-img-top">
<h4 class="card-header">Health education</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
</div>
</div>
<div class="section-testimonial">
<div class="row" >
<div class="col-md-2">
<h2> What people say about me</h2>
</div>
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Related
I'm trying to embed this carousel in my Bootstrap 5 page. It comes from Codepen - https://codepen.io/sahil-verma/pen/wxXryx
So far, I've copied the code in my webpage, and embedded the corresponding CSS in style tags something like this
<div class="container">
<style media="screen">
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 60px;
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-indicators {
position: relative;
right: 50%;
top: auto;
bottom: 0px;
margin-top: 20px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 50%;
opacity: 0.4;
overflow: hidden;
transition: all .4s ease-in;
vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
width: 128px;
height: 128px;
opacity: 1;
transition: all .2s;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<a class="btn btn-primary" href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class="fa fa-arrow-left"></i> Back to Article</a>
</div>
What I'm getting is this
I can't figure out for the love of God what is going wrong here. The carousel just won't work. Can anyone point out what I'm doing wrong here. There's another carousel on the page which works just fine. I've also tried this same code in a Bootstrap 4 setting with no carousels but I get the same result.
Can someone point out what I'm doing wrong here?
First of all you are using the wrong .item class. This should be like below:
<div class="carousel-item">
<blockquote>
...
</blockquote>
</div>
That will fix the display.
Next, you have missed the data attribute prefix in several places (used in BS5) go through your code and add bs- where needed (data-bs-ride, data-bs-target, data-bs-slide, etc.) and the carousel will work as expected.
See my working snipet:
<!doctype html>
<html lang="en">
<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.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<style media="screen">
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 60px;
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-indicators {
position: relative;
right: 50%;
top: auto;
bottom: 0px;
margin-top: 20px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
border-radius: 50%;
opacity: 0.4;
overflow: hidden;
transition: all .4s ease-in;
vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
width: 128px;
height: 128px;
opacity: 1;
transition: all .2s;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-bs-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="carousel-item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>ONE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="carousel-item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>TWO Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="carousel-item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>THREE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#quote-carousel" data-bs-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-bs-target="#quote-carousel" data-bs-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-bs-target="#quote-carousel" data-bs-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-bs-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-bs-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<a class="btn btn-primary" href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class="fa fa-arrow-left"></i> Back to Article</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
https://getbootstrap.com/docs/5.1/components/carousel/
I have an element on the page which, when it is hovered over, expands and reveals some previously hidden text within it. The problem is that when the element expands, it moves other content below it. I tried to use position:absolute, but it has not achieved the desired effect.
.col {
padding: 20px;
}
.col:hover {
background-color: lightgray;
}
.revealOnHover {
display: none;
/*position: absolute;*/
}
#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col" id="block1">
<img src="https://picsum.photos/100/100?random=1">
<p><b>Lorem ipsum dolor sit amet</b></p>
<i class="fas fa-caret-down" style="color: red;"></i>
<p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col" id="block2">
<img src="https://picsum.photos/100/100?random=1">
<p><b>Excepteur sint occaecat cupidatat non proident</b></p>
<i class="fas fa-caret-down" style="color: red;"></i>
<p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<p> </p>
<div style="text-align: center;">
<button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button>
<button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button>
</div>
</div>
My Code: https://codepen.io/eren5897/pen/GRqgOyd
You're not far off actually. position:absolute is the way to go, but you need a few additional styles to make it work, mainly in order to correctly position it and make it share the background color of its parent.
.col {
padding: 20px;
}
.col:hover {
background-color: lightgray;
}
.revealOnHover {
display: none;
position: absolute;
left: 0;
right: 0;
padding: 10px;
background: inherit;
}
#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col" id="block1">
<img src="https://picsum.photos/100/100?random=1">
<p><b>Lorem ipsum dolor sit amet</b></p>
<i class="fas fa-caret-down" style="color: red;"></i>
<p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col" id="block2">
<img src="https://picsum.photos/100/100?random=1">
<p><b>Excepteur sint occaecat cupidatat non proident</b></p>
<i class="fas fa-caret-down" style="color: red;"></i>
<p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<p> </p>
<div style="text-align: center;">
<button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button>
<button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button>
</div>
</div>
Add min-height to your row class
Your class becomes
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
min-height: 317PX;}
How about adding
.row {
min-height: 20rem
}
This makes sure that they don't move when the divs are being expanded.
I was reading some answered questions in here, but I still have the problem, I can't "re-adjust" an image inside a div, the image doesn't respect the containing height of the div, and also I cant make the part of the image that I want show on it, this is what I mean:
HTML
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<section id="about">
<div class="container-fluid text-center">
<div class="row content">
<div class="col-lg-12">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
<section id="img">
<div class="container-fluid">
<div class="row content">
<div id="imgcont">
<div id="header">
<div class="title">
<h1>Title in image centered</h1>
</div>
</div>
</div>
</div>
<div class="row content text-center">
<h1>More content, same section </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit.</p>
</div>
</section>
<section id="howto">
<div class="container-fluid">
<div class="row content">
<div class="col-lg-12">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
CSS:
body {
color: white;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
padding-bottom: 0;
}
.row.content {
min-height: 450px
}
#about {
background-color: red;
}
#img {
background-color: gray;
height 100%;
}
#howto {
background-color: #003300;
}
#imgcont {
height: 50%;
}
#header {
background: url(http://www.qygjxz.com/data/out/162/6155406-mountain-images.jpeg);
background-size: cover;
height: 100vh;
position: relative;
top: -10px;
overflow: hidden;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
.title h1 {
text-transform: uppercase;
margin: 0;
font-size: 3rem;
white-space: nowrap;
}
https://codepen.io/elunap/pen/ZaXKKK
I have 3 sections in which I have different content, on the second section I want to adjust the image to appear like that, without overlapping the image and the top section.
This is my goal:
https://imgur.com/a/OIeKt
Can someone guide me?
Change
#header {
height: 100vh;
}
To
#header {
height: 50%;
}
Updated sample: https://codepen.io/anon/pen/bYoRNq
I am trying create a bootstrap version of this: https://jsfiddle.net/yxmehwwp/
However I bump to some issues as the columns doesn't get the format like the one I sent above.
I am currently working here: https://jsfiddle.net/2w47vqff/
Here's my HTML:
<div class="container">
<div class="row">
<header class="main-header" id="header">
<div class="col-lg-2">
<h1 class="name">MY DESIGN</h1>
</div>
<div class="col-lg-2">
<ul class="main-nav">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Rode
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<div class="col-lg-12 center">
<div class="banner">
<h1 class="headline">WELCOME</h1>
<span class="tagline">YOu are Here</span>
</div>
</div>
</div>
<section>
<h2>How</h2>
<div class="row">
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-4">
<p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
<section class="about">
<div class="row">
<div class="col-lg-12 center">
<h2 class="white">Contact</h2>
</div>
<div class="col-lg-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitaHELLOta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
</div>
</div>
</section>
<footer class="main-footer">
<div class="col-lg-12 center">
<div class="footer-inner">
<span>© 2067</span>
</div>
</div>
</footer>
</div>
It must look exactly like the one here: https://jsfiddle.net/yxmehwwp/ but using bootstrap.
Any idea? Please help!
you have written bootstrap styles for large and medium screens. Try to add the stuff for small screens also. So that you can see the same kind of results in the fiddle. For your reference I have modified a little of your code for small screens. Now you can play with this fiddle.
Instead of
<div class="col-md-4">
Use
<div class="col-md-4 col-xs-4">
FIDDLE DEMO
You can achieve the same with nav-justified feature of bootstrap
Try this
Check Working Demo
Include the following HTML and CSS.
HTML:
<div class="masthead">
<div class="row">
<div class="col-sm-12">
<h3 class="text-center header-title">MY DESIGN</h3>
<nav>
<ul class="nav nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
CSS:
.header-title {
color: #fff;
padding: 10px 15px;
}
.nav-justified {
background-color: #000;
}
.nav-justified > li > a {
color: #fff;
display: block;
padding: 10px 15px;
text-align: center;
}
.nav > li > a:focus,
.nav > li > a:hover {
background-color: transparent;
text-decoration: none;
color: #18bc9c;
}
.masthead {
background-color: #000;
display: inline-block;
width: 100%;
padding: 1em 0.7em;
}
Update:
CSS:
#media (min-width: 1025px) {
.header-title {
float: left;
}
nav {
float: right;
}
}
Demo link has been updated.
I have a problem with 960 Grid System.
My english is not so good so I'll show you a picture what I mean:
https://picr.ws/images/0651e9daf54838f294450fae875b25e5.png
I want to push the bottom grid_4 to the top grid_4, instead of it staying under the grid_8. Here is my code:
.container {
width: auto;
height: auto;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #dedede;
background-color: #fff;
position: relative;
}
.container .title {
font-weight: 400;
font-size: 14pt;
}
.container .content {
font-size: 10pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>960 Grid System</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css">
</head>
<body>
<main class="container_12">
<div class="grid_4">
<div class="container">
<div class="title">grid_4</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="grid_8">
<div class="container">
<div class="title">grid_8</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="clear"></div>
<div class="grid_4">
<div class="container">
<div class="title">grid_4</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</main>
</body>
</html>
Hopefully someone can help me
Put both the left grids into one grid_4.
.container {
width: auto;
height: auto;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #dedede;
background-color: #fff;
position: relative;
}
.container .title {
font-weight: 400;
font-size: 14pt;
}
.container .content {
font-size: 10pt;
}
.grid_4, .grid_8 {
background-color: #cccccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>960 Grid System</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css">
</head>
<body>
<main class="container_12">
<div class="grid_4">
<div class="container">
<div class="title">Title in container 1</div>
<div class="content">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="container">
<div class="title">Title in container 2</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="grid_8">
<div class="container">
<div class="title">grid_8</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="clear"></div>
</main>
</body>
</html>
I've put in extra background color to better show, how it works.