I put this specific code into codepen, and it displays correctly and looks great, but when i export the file and open it up through local chrome browser it does not work properly. The static headline keeps displaying below the carousel instead of in the carousal, here is the code im using.
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #FFF;
}
.carousel-caption {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Depot Sqaure</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/class" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/mainimg01.png" alt="First slide">
<div class="carousel-caption">
<h3>
Your elegant and affordable destination</h3>
<p>
for family, business, and community events.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
</body>
</html>
Related
---------//////Question starts here/////---------------
I am trying to make all of my Bootstrap 5 cards even in standard view and responsive to mobile devices, but adjusting the height in CSS does not seem to work. Right now it is responsive, but the pictures are all stretched out. As far as the card's height they are all different sizes. I tried grabbing the card-text "class" and using truncate but it doesn't seem to help either. I feel like I'm so close. Im almost positive it has to do with the card-text class. Any thoughts? I've attached a picture to this question, and here is my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio Projects</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min (15).css" />
</head>
<body>
<!-- ===================== NavBar Starts from here====================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CHAZZY!</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="../index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../About/index.html"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../Projects/index.html"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="https://chaz-carothers.netlify.app"
>Tree.Link</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="../Contact/index.html"
tabindex="-1"
aria-disabled="true"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================== NavBar Ends ========================== -->
<!-- ========================== Project Cards ======================== -->
<div class="container">
<div class="row">
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img src="../Projects/img/weather.jpeg" alt="Weather" />
<div class="card-body">
<h5 class="card-title">Weather API</h5>
<p class="card-text">
This is a weather app I created using the ___ API. I added
several other weather resources to provide extra information.
</p>
<a
href="../WEATHER API/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/Skeletorrr.png"
class="card- img-top"
alt="skeletor"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Whack-A-Skeletor</h5>
<p class="card-text">
This is my version of a Whack-A-Mole game that I created using plain vanilla JavaScript.
Skeletor is the mole, and the game has background music to the Price Is Right. Once the user
is finished playing, Vincent Price's notorious laugh chimes in at the end.
</p>
<a
href="https://pedantic-swartz-521f4d.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="./img/badguys.png"
class="card- img-top"
alt="villain"
/>
<div class="card-body">
<h5 class="card-title">Disney Villain Page</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore.
</p>
<a
href="https://dizney.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/memory.jpeg"
class="card- img-top"
alt="memory"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Harry Potter Memory Game</h5>
<p class="card-text">
My 7 year old son's favorite movie is Harry Potter, so I programmed a memory game for him using JavaScript.
</p>
<a
href="../Projects/Memory Game/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
-----------------/////And here is my CSS//// -------------
body {
background-color: gray;
}
.card {
transition: border-color 1s, box-shadow 0.5s;
}
.card:hover {
border-color: rgb(255, 0, 0);
box-shadow: 0px 0px 10px 2px rgb(255, 0, 0);
}
.card-title {
display: flex;
justify-content: center;
}
.film {
font-size: 3rem;
}
#media all and (max-width: 600px) {
.film {
font-size: 2rem;
}
.card {
width: 100%;
}
.card-title {
font-size: 1.5rem;
}
.img-card {
width: 100%;
}
}
body{
background-color: #CAF7E3;
}
.container-fluid{
padding: 3% 15%;
}
.navbar{
font-family: 'Montserrat';
font-weight: bold;
}
.navbar-brand{
font-size: 2.5rem;
}
.nav-item{
margin-right: 2rem;
}
#title{
padding: 8% 15%;
background-color: #F8EDED;
}
.slogun{
padding-left: 25px;
font-family: 'Ubuntu';
font-weight: bold;
font-size: 3rem;
}
.img-fruit{
padding-left: 9%;
}
.fruit{
width: 90%;
}
.carousel-inner{
padding: 8% 15%;
}
.unsplash{
object-fit: none;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Grocery Store</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;1,900&family=Ubuntu:ital,wght#0,400;0,500;1,700&display=swap" rel="stylesheet">
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<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">
<div class="row">
<div class="col-lg-6 slogun">
Not only an apple but fruits every day keeps the doctor away
</div>
<div class="col-lg-6 img-fruit">
<img class="fruit" src="photos/fruit.png" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<img class="unsplash" src="photos/check.jpg" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</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>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Here is slide 2 I took the landscape photo from unsplash.com and used it here but since then when I move from slide 1 to slide 2 the carousel section height increases due to image and also the image doesn't in the width of the carousel-item (the image name in the html is check.png) how can i solve this problem.
You can give fixed height and width to the images as required by the carousel:
<img class="fruit" src="photos/fruit.png" alt="" height="50" width="200" >
(Height and Width are in Pixels.)
I have the following structure:
<div class="carousel" id="my-carousel">
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
</div>
I also have the following script for normalizing the carousel:
function normalizeCarousel() {
function normalize() {
var maxHeight = 0;
$(".carousel-item").each(function() {
var currentHeight = $(this).height();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
$("#my-carousel").css("height", maxHeight);
};
normalize();
$(window).on("resize orientationchange", function() {
normalize();
});
}
$(document).ready(function() {
normalizeCarousel();
});
Here is the JSFiddle: JSFiddle
What I'm trying to do is vertically align each text-center div inside the carousel-items. I've tried using flexbox but couldn't manage to make it work!
Thank you in advance!
This is ought to do the trick
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}
with flexbox, use something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.text-center {
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
color: red;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
this is doing my head in,i'm trying to simply put my h1 and p in the center of the carousel so even when the image changes, the text(h1 and p) remain the same at all times.
I have tried messing around with the positions but it created a real mess.
I realize there are multiple ways to achieve this but what is the most simple
Thank you
html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="resources/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="carousel-header">
<h1>Front End Web Developer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
</div>
<!-- Carousel -->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
</div>
</div>
</div>
CSS
body {
position: relative;
height: 100%;
}
/*<!-- Carousel -->*/
.carousel-inner {
height: 50rem;
}
/*<!-- Carousel Text -->*/
.carousel-header h1 {
text-align: center;
}
.carousel-header p {
text-align: center;
}
You can try with this code, I don't have include any media tag for make it responsive anyway, this way it will work at 100%.
The Code:
body {
position: relative;
height: 100%;
}
.carousel-container{
position: relative;
height: 100%;
width: 100%;
}
/*<!-- Carousel -->*/
.carousel-inner {
height: fit-content;
}
/*<!-- Carousel Text -->*/
.carousel-header{
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100;
}
.carousel-header h1 {
text-align: center;
}
.carousel-header p {
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="resources/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="carousel-container">
<div class="carousel-header">
<h1>Front End Web Developer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
</div>
</div>
</div>
</body>
</html>
I hope I helped you,
Greetings.
I'm facing an issue in matching the size of a box to mobile(using bootstrap)
I have got 3 boxes, number 1 and 2 are images and number 3 has text,
and it looks like this
when I resize the screen to mobile size this is what happens(box number 3 is higher or in some devices shorter than box number 2, like here:error
I need it to look like that (box number 3 in the same height as 2):desired output
I tried to set max height and min hight to box3 but this is not the solution because it doesn't match to all the devices.
html:
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 ">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 ">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 ">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</section>
this is the problematic box, box number 3:
<div class="yellow-box">
css:
.yellow-box{
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
min-height: 204px;
margin-top:150px;
background-color: #e6ff00;
margin-left: -15px;
margin-right: -15px;
}
this is box number 2:
.women-margin{
margin: -1px -15px -2px -17px;
position: relative;
display: block;
padding-right: 0;
}
<!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">
<title>Example of Bootstrap 3 Nested Rows and Columns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.main-content{
min-height: 330px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 150px;
margin-bottom: 30px;
background: #b4bac0;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-4">
<div class="main-content"></div>
</div>
<div class="col-xs-6 col-lg-4">
<!--Nested rows within a column-->
<div class="sidebar-content"></div></div>
<div class="col-xs-6 col-lg-4">
<div class="sidebar-content"></div>
</div>
</div>
</div>
</body>
</html>
Try this code.. for more info click here
<!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">
<title>Example of Bootstrap 3 Nested Rows and Columns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.main-content{
min-height: 330px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 150px;
margin-bottom: 30px;
background: #b4bac0;
}
.left{
background: red;
}
.box2{
background: green;
height: 100%;
}
.box3{
height: 100%;
background: blue;
}
.right{
background:green;
margin:0;
padding:0;
}
</style>
</head>
<body>
<section id="carousel-section">
<div class="container-fluid">
<div class="row feature">
<div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 left">
<div class="carousel-margin">
<div id="myCarousel" class="carousel1 slide container-carousel" data-
ride="carousel1">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic"
id="mainImage1" >
</div>
</div>
</div>
</div>
</div>
<div class="right col-lg-4 col-xl-4 col-md-12 col-xs-12 col-sm-12">
<div class="col-lg-12 col-md-6 box2">
<div class="women-margin">
<img src="images/women_3.png" alt="live" id="women-eyes1" >
</div>
</div>
<div class="col-lg-12 col-md-6 box3">
<div class="yellow-box">
<h2 id="change_h2">THE DRAGON HUNTER</h2>
<br/>
<p id="change_p"> Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolor aliqua. </p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>