I have a standard Bootstrap grid and an image inside a .col which height should be equal to the height of the text block to the right:
.img-fluid-height {
max-height: 100%;
width: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
I expected the image to be the height of the .col container which height is equal to the height of the text block to the right. However, it doesn't work like this.
Remove the image from the flow using position:absolute and your text will define the height then you can use height:100% on the image:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
I was assuming something else. You can do something like this with background-size.
.background-image {
height: 100%;
background-image: url("https://placehold.it/1920x1280");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<div class="background-image"></div>
</div>
<div class="col-8">
<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>
</div>
added width:100% Hope this helps. thanks
.img-fluid-height {
max-height: 100%;
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4 overflow-hidden">
<img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
</div>
<div class="col-8">
<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>
</div>
Related
I am having an issue with bootstrap's justify-content-between. I have 2 divs inside a container and I want to position them at the extreme ends of the container. So I am using justify-content-between, but it is evenly distributing the space between the 2 divs, which I don't want. I want no space at the start i.e. extreme left and end i.e. extreme right. If I know correctly then justify-content-between should accumulate the space in the middle and place the divs at the extreme end.
the code is:
<div class="container flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</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.</p>
<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 class="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
It is looking like this now: (Notice the space marked by the violet region on the browser)
I am using Brave browser.
Kindly, please help me out. I don't know how to solve this issue. Any help would be appreciated. Thank you.
Here is the working example
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div style="display: flex;" class="container-fluid flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</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.</p>
<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 class="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
</body>
</html>
Using a container div and applying justify-content-between to the row pushes the two columns to the left and right, leaving a single-column space in the middle (it’s a single column space because your left column is 6 columns wide and your right columns is 5 columns wide).
Using a container-fluid div and applying justify-content-between to the row makes the row go full width and pushes the two columns to the left and right, leaving a single-column space in the middle.
I like using the row div in a Bootstrap layout inside the container div as that’s the way Bootstrap is setup to work.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</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.</p>
<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 class="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</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.</p>
<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 class="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
Your question used col-md-5 and col-md-6, so for smaller screens, the display goes to col-12. I used the same column sizing in my answer.
One note about using Stackoverflow – you added a comment on May 14 a little while after I posted my comment, but since you didn’t include #Rich, Stackoverflow didn’t let me know you had posted a comment. Only the original poster gets notified for all comments and posts – the rest of us are only included if you specifically include a reference to our name (or if the comment follows an answer that we posted).
I have added 2 child divs in parent div and applied css and its working fine.
Try adding css style as below:
Regards,
Nisha Patel
I would like to scroll on the content div instead of the whole page, how can I do that?
<html>
<head>
</head>
<body>
<div>
<div style="display: flex">
<div style="margin-right: 50px">Sidebar</div>
<div>
<div>Header</div>
<div id="content" style="overflow-x: auto; white-space: nowrap">
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.
</div>
</div>
</div>
</div>
</body>
</html>
#Searene This is the answer you were looking for with flexbox.
There's two snippets: One, with all the content scrolling and the other with the header being fixed in place.
This is very simple and clean. No fixed widths or css hacks.
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow-x:auto;">
<div>Header</div>
<div style="white-space: nowrap;">
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.
</div>
</div>
</div>
</div>
</body>
</html>
In this snippet the HEADER stays in place and only the content scrolls.
<html>
<head>
</head>
<body>
<div>
<div style="display: flex;flex-direction: row;border: solid 10px">
<div style="margin-right: 50px; background:red">Sidebar</div>
<div style="background:blue; overflow:hidden">
<div>Header stays in place</div>
<div id="content" style="white-space: nowrap; overflow:auto">
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.
</div>
</div>
</div>
</div>
</body>
</html>
I finally gave up flex and used float to resolve this problem.
<html>
<head>
</head>
<body style="margin: 0">
<div style="margin-right: 50px; width: 50px; float: left">Sidebar</div>
<div style="float: left; width: calc(100% - 100px)">
<div>Header</div>
<div id="content" style="overflow-x: auto; white-space: nowrap">
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.
</div>
</div>
</body>
</html>
I need help aligning my divs acording to example below:
What I got so far is this:
I cant apply spacing in between the two divs, and the divs are not the same height.
My Html:
<div class="container - fluid">
<div class="row" id="wrapper">
<div class="col-lg-8 col-md-8" id="columneone">
<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-4 col-md-4" id="columnetwo">
<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>
</div>
My css(I am using less):
#columneone{background-color:#deepblue !important; color:white !important;}
#columnetwo{background-color:#lightblue !important; color:white !important; }
#wrapper{margin-right:-173px; margin-left:-173px; padding-top: 10px}
You should review Bootstrap's documentation about its Grid as it will provide you with a better understanding for why your initial attempt lacked gutters between the background colors, as well as a variety of other ways you could improve your previous attempt.
In Bootstrap 4 we can take advantage of a host of new utility classes as well as the flexbox grid to achieve your desired results.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row row-eq-height">
<div class="col-8">
<div class="bg-dark h-100 p-3">
<p class="text-white">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>
<div class="col-4">
<div class="bg-secondary h-100 p-3">
<p class="text-white">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>
</div>
</div>
The colors used here are just pulled using Bootstraps .bg-* utility classes, you'll need to adjust that to correctly reflect your preferred scheme.
I want all of my images to be the same size on my home page. However when I add the photos, some are not the same height. I would like for them to all be the same without stretching but instead by filling and cropping. How do I do this? Thank you!
img {
overflow: hidden;
max-width: 100%;
height: auto;
margin: 0 0 10px 0;
}
<div class="thirds clearfix">
<!-- one-third -->
<div class="one-third mobile-collapse">
<a href="thetrainer.html">
<img src="http://i66.tinypic.com/vnfcro.jpg" width="400px" height="400px">
</a>
<h2>The Trainer</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.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-second mobile-collapse">
<a href="lessons.html">
<img src="http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg" width="400px" height="400px">
</a>
<h2>Lessons</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.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
<!-- one-third -->
<div class="one-third one-third-last mobile-collapse">
<a href="training.html">
<img src="http://i68.tinypic.com/2rel7rd.jpg" height="400px" width="400px">
</a>
<h2>Training</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.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<!--/one-third-->
</div>
<!--/thirds-->
CSS only solution will require you to add put image as background image of that div with background-size: cover style.
So your anchor tag should have these styles:
background-image: url('link-to-image.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Just note that your anchor tag should have height and width to display image as its background.
Another way is to use the images as the background. Use div instead of img in your HTML and use background-image for the images...As you have multiple images, you have to write inline css for background-image
Setting width and height to the image will stretch your image...
Stack Snippet
.image-wrapper {
height: 400px;
width: 400px;
background-size: cover;
background-position: center center;
}
<div class="thirds clearfix">
<div class="one-third mobile-collapse">
<a href="thetrainer.html">
<div class="image-wrapper" style="background-image:url(http://i66.tinypic.com/vnfcro.jpg)"></div>
</a>
<h2>The Trainer</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.</p>
<div class="button1">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<div class="one-third one-third-second mobile-collapse">
<a href="lessons.html">
<div class="image-wrapper" style="background-image:url(http://static1.squarespace.com/static/5461836ee4b073a05b541f40/t/548df630e4b023e5238f8546/1418589745114/0image.jpg)"></div>
</a>
<h2>Lessons</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.</p>
<div class="button2">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
<div class="one-third one-third-last mobile-collapse">
<a href="training.html">
<div class="image-wrapper" style="background-image:url(http://i68.tinypic.com/2rel7rd.jpg)"></div>
</a>
<h2>Training</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.</p>
<div class="button3">
<img src="http://i66.tinypic.com/33kakow.png">
</div>
</div>
</div>
One option is defining custom width and height for image. For example: define css like this in your css file..
.ImageDefault{
width:100px;
height: 100px;
}
And in image use:
<img src="some path" class="ImageDefault"/>
Working on the container scrolling over the jumbotron however the text in the jumbotron is not hiding underneath the container beneath it on scroll. How do I get 'Main Title Goes Here', 'Subtitle' and the blue box with those elements to go under the container with lorem ipsum text. Tried setting z-index to -1 for the hero-text class but it hides the text and box all together.
https://codepen.io/zepzia/pen/JrwKbN
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="hero-text">
<h1 class="hero-title">Main Title Will</h1>
<h1 class="hero-title">Go Here</h1>
<div class="subtitle">SUBTITLE</div>
<div class="arrow animated bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyDQoJbDE4OS45OTktMTkwYzIwLjE3OC0yMC4xNzgsNTMuMTY0LTE5LjkxMyw3My42NzIsMC41OTVsMCwwYzIwLjUwOCwyMC41MDksMjAuNzcyLDUzLjQ5MiwwLjU5NSw3My42NzFMMjkzLjc1MSw0NTUuODY4eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIyMC4yNDksNDU1Ljg2OGMyMC4xOCwyMC4xNzksNTMuMTY0LDE5LjkxMyw3My42NzItMC41OTVsMCwwYzIwLjUwOS0yMC41MDgsMjAuNzc0LTUzLjQ5MywwLjU5Ni03My42NzINCglsLTE5MC0xOTBjLTIwLjE3OC0yMC4xNzgtNTMuMTY0LTE5LjkxMy03My42NzEsMC41OTVsMCwwYy0yMC41MDgsMjAuNTA5LTIwLjc3Miw1My40OTItMC41OTUsNzMuNjcxTDIyMC4yNDksNDU1Ljg2OHoiLz4NCjwvc3ZnPg0K" />
</div>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<main>
<!-- MESSAGE -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-box">
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
The structure looks a little confusing, but if you dont want to rebuild the html you can add something like:
main {
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -32px;
padding-top: 32px;
}