I'm having an issue getting an image to appear to "overflow" the DIV it is residing in.
A simple example:
<div class="container callout-blue">
<div class="row">
<div class="col-md-6"> Some content</div>
<div class="col-md-6">
<img src="myimage.png" class="hidden-sm hidden-xs center" />
</div>
</div>
</div>
With the desired effect of having the container-div with a blue background, but have the image appear to spill over the top of the div. Say the blue-background is 200px high, and the image is 300px high, having the top 100px of the image appear above the callout div.
change your HTML like this:
<div class="col-md-6 overbox"> <img src="myimage.png" class="hidden-sm hidden-xs center" /></div>
and now apply your CSS like this:
.overbox{position:relative;}
.overbox img{position:absolute; left:0; top:-100px;}
Related
I have this setup in a section, but Bootstrap break the 3rd column into a new line, why?
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3 pl-3" id="portraitPreviewColumn" style="padding-left:0">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3 pl-3" id="socialPreviewColumn" style="padding-left:0">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Looks like this:
I removed padding left, but has the same phenomenon.
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3" id="portraitPreviewColumn">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3" id="socialPreviewColumn">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Try to add
class="img-fluid"
to the images.
The documentation says:
Responsive images Images in Bootstrap are made responsive with
.img-fluid. max-width: 100%; and height: auto; are applied to the
image so that it scales with the parent element.
Source: https://getbootstrap.com/docs/4.0/content/images/
I think, your screen is too small
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
try col-6 col-3
Problem was that the parent container had padding. I set it zero, and then all the 3 item got into one line.
I tried to align several items by using two columns and positioning the text, icon, and line within the left column and the other text on the right column, but they don't align properly. It currently looks like this but it should look like the picture attached. How can I fix this?
<div class="col-12">
<h1 class="orange">LET'S RUB IT IN</h1>
<h2>How Much?</h2>
</div>
<div class="col-6"> <!--left column-->
<div class="circle side">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div> <!--vertical line-->
</div>
<div class="col-6"> <!--right[enter image description here][1] column-->
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass.</p>
</div>
It looks like the issue is you aren't using the .container > .row > .col convention. You've skipped the .container, and are sometimes skipping the .row. Additionally, you are not using the grid for the section shown in your screenshot.
Refer to the Bootrap documentation when there are Bootstrap issues.
https://getbootstrap.com/docs/5.0/layout/grid/
The first thing is you should wrap all/most of your <body> content in a <div class="container-fluid">.
Then add any missing .rows.
This is what you have:
This is what you should have:
Write the contents of that next section to match your design.
ex.
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-6" style="border-right: 2px solid orange;">
<div class="circle side" data-sr-id="9" style="visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
<img src="./chemical#2x.png" alt="chemical" class="icon">
</div>
</div>
<div class="col-6">
<h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
<div class="line v side"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass. </p>
</div>
</div>
You can Refere Bootstrap Grid System
Here:https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
It will fix your problem
I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link