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
Are There Appearance CSS Rules for Webkit-Overflow-Scrolling: Touch "Handle" in iOS 5
How to Resolve The CSS Warnings for Browser Specific Selectors in Bootstrap 3
Override Vuetify 2.0 SASS Variable $Heading-Font-Family
What Does "Body > *" Mean in CSS
Mobile Safari Text Input Width Bug
Page Styles Break When I Change Styles in Chrome Devtools with Webpack Hmr
How to Style a Svg Using CSS in Javafx Fxml
Primefaces Custom Positioning for a Specific P:Growl
How to Use Float Without Flipping Floated Item and Changing in Source Order? Is This Possible
Vertically Align Text to The Bottom of The Box
How to Float Image Inside of Div
How to Position a Background Image Relative to The Centre of an Element
How to Change The Scrollbar to Custom Design? (Avoid Using The Default Browser Look)
What Do These "\E6##" Characters Mean
CSS: Link and: Visited Pseudo-Classes - Are Web Browsers Adhering to The Spec
Media Query to Differentiate Desktop from iPad in Landscape Mode
How to Use Overflow:Hidden Without an Explicit Height Somehow