Make an Element Overlap Contents Below It Using Bootstrap

Make an element overlap contents below it using Bootstrap

You could absolutely position the .col-md-3.img element, and then float the .col-md-8.nav to the right. I added some classes to the elements and then placed the styling in a media query to ensure this doesn't conflict with any mobile/tablet styling. It seems to work well on all screen sizes.

UPDATED EXAMPLE HERE - FULL SCREEN EXAMPLE

@media (min-width: 992px) {
.col-md-3.img {
position: absolute;
text-align: center;
}
.col-md-3.img .thumbnail {
display:inline-block;
}
.col-md-8.nav {
float: right;
}
}

Add text-align:center to center the .thumbnail element, which is now also inline-block to fix background-related issues that result from the absolute positioning.

HTML, CSS and Bootstrap contents are overlapping

.centering_the_slider_contents {
margin: auto;
width: 100%;
text-align: center;
margin-top: 10px auto;

/* position: absolute;*/
}

.images_in_nuts {
border-radius: 50%;
width: 250px;
height: 250px;
display: inline-block;
}

.nut_text {
display: inline-block;
vertical-align: top;
margin-top: 30px;
}

.last_contact_us {
background: #ffffff !important;
// margin-top: 300px;
}

.footer_contact_us {
margin-top: 10px;
text-align: center;
font-size: 25px;
font-family: "Poppins";
font-weight: bold;
}

.footer_contact_us_expl {
text-align: center;
font-family: "Poppins";
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>

<!-- About nuts - Slider-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="slider">
<div class="centering_the_slider_contents">
<!-- Nut 1-->
<div class="carousel-item active">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 1 Ends-->
<!-- Nut 2-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 2</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 2 Ends-->
<!-- Nut 3-->
<div class="carousel-item">
<figure class="images_in_nuts">
<img src="images/almonds.jpg" />
</figure>
<div class="nut_text">
<h2>Almond 3</h2>
<h3 class="rich_in">Rich In</h3>
<p>
Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
Phosphorus, Magnesium, Copper, <br />
Phytonutrients, specifically flavonoids, plant sterols,<br />
phenolic acids
</p>
</div>
</div>
<!-- Nut 3 Ends-->
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</div>
</div>
</div>
</div>

<!-- Everything Related to nuts ends here - Slider Ends-->

<div class="last_contact_us" id="last_contact_us">
<p class="footer_contact_us">Contact Us</p>
<p class="footer_contact_us_expl">
Call us to get Nuts and Spices at a best quality <br />
and also at a best price
</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>

Bootstrap 4 How to Overlap Two Divs that Stack Responsively

You could add a transform to your overlay column (you may need to cancel this with a media query for your smaller screens).

Please note in the html below, I have fixed your code to work with boostrap 4 - columns have to be inside a row (they cannot be on a row) and I don't think there is a -xs class any more

.overlay-text {
/* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
align-self: flex-start;
transform: translateX(-20%);

/* the following are for example only */
background-color: #ffffff;
padding:20px;
}
<div class="container somesection">
<div class="row">
<div class="col col-sm-6">
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="w-100">
</div>
<div class="col col-sm-3 col-sm-offset-4 overlay-text">
This is some text that should partially overlay.
</div>
</div>
</div>

Example bootply

Bootstrap dropdown overlapping container div, rather than pushing it down

I'm thinking that the easiest solution for this will be that you need to clear your floats in the primary and secondary menu.

As you can see you have:

<div class="navbar navbar-static-top">...</div>

And you also have:

<div class="secondmenu">...</div>

The easiest way to clear these would be to put them inside a .row class or .row-fluid. I also suggest that you get into the habit of adding rows to your code when you can so these kinds of things clear.

Your code should end up looking like this:

<div class="row">
<div class="navbar navbar-static-top">...</div>
<div class="secondmenu">...</div>
</div>

Last but not least... your text is not positioned absolutely in relation to the slider div, but instead to the browser chrome, so you need to make your slider container have a position: relative so any elements set to position: absolute inside that container (in this case your h1) will be positioned absolutely according to it's parent container.

So set this in your styles as well:

.sliderwrap {
position: relative;
}

That pretty much fixes your double menu so it clears the slider and the text. Let me know if this works for you and if you need any clarification on the answers, don't forget to upvote or accept the answer if it works! Cheers.

Getting an overlap effect with Bootstrap divs

Give your .row the style or CSS rule position: relative; and now give your image you want to overlap that row position: absolute; but keep it placed inside the row. Now it will be placed relative to your .row but you can adjust its position with the CSS attributes top, right, bottom, and left. Furthermore you can make it bigger than the row (via CSS or image attributes) and it will not influence the dimensions of your .row. Should it be cut by an other element you can give it an higher z-index. With this values you should be able to get your desired effect.

EDIT
So your code could look like something like this in the end:

.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
margin-top: 200px;
background-color: #AF002A;
color: white;
position: relative;
}

#isocert{
overflow: visible;
position: absolute;
top: -50px;
}

Here is a fiddle with an example: http://jsfiddle.net/L1wn66v8/

Let Button overlap div on bottom (CSS/Bootstrap 4 Grid)

Here's a solution, where the buttons are inside the three boxes, but have absolute positioning that forces them to spill outside the bottom of the div by around half.

<section id="threeblocks" class="">
<div class="container-fluid">
<div class="container">
<div class="row">
<div id="box1" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box2" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
<div id="box3" class="col p-5 d-flex flex-column headlineBox">
<h3 class="pb-2">HEADLINE</h3> Content goes here
<button>lorem ipsum</button>
</div>
</div>
</div>
</div>
</section>

CSS

.headlineBox button{
background-color: #466f75;
color: #fff;
position: absolute;
bottom: -10px;
margin:0 auto;
display:block;
}

#box1{
background-color: #e6f4f6;
}
#box2{
background-color: #d8eef1;
}
#box3{
background-color: #e6f4f6;
}

Codepen https://codepen.io/Washable/pen/bYwGzR

My div content gets overlapped by the next div when i switch to small devices

so i randomly fixed it just by adding this code on css

.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}



Related Topics



Leave a reply



Submit