Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Make an Image Fill the Page Margins

When using Bootstrap containers, your image and text section will by default have padding on either side of it. Often, however, you will want your image to meet the page’s edge without padding.

When you have a featured image with text, it is better to remove all the padding and margin around it and have it fill the margins. Containers in Bootstrap come with automatic alignment, padding, and margins. In this tutorial, we'll show you how to add images without margins or padding.

First, we start out by creating a section tag to put our image and text in. Then we create a div to have a container to put our image in. We don't have to worry about re-scaling the image on different device breakpoints since Bootstrap has the .img-fluid class to make images responsive and scale at different screen sizes. This class applies max-width: 100% and height: auto to the image and makes the image scale with the parent element.

For our text, we will create a container element because we want our text to have the appropriate padding and margin. So, basically we create two separate children elements inside the section. Here's the full HTML of our layout:

HTML

<section class="section-text">
	<div class="picture">
		<img src="https://raw.githubusercontent.com/solodev/image-filling-page-margins/master/images/image.jpg" alt="" class="img-responsive">
	</div>
	<div class="container">
		<div class="row">
			<div class="text-wrapper">
				<h2 class="mb-0">Be part of the 
                      <span class="font-weight-bold">Lunar XPerience</span>
                   </h2>
				<p class="my-4">If you're an explorer, then the moon is calling.
					<br>Join the LunarXP mission where new worlds await.</p> <a class="btn btn-primary text-white" href="#" tabindex="0">Tour Our Ships</a> 
			</div>
			<!--.text-wrapper-->
		</div>
	</div>
	<!--.container-->
</section>
<!--.section-text-->

Once we build our HTML structure, we need to add some CSS rule.

Below, used used the pseudo-classes of ::before and ::after and declared { content: ""; display: table; } to ensure that the containers and rows expand automatically with the size of their children elements. The image is set to { object-fit: cover; } so that it covers the entire area designated for the image and scales while retaining its proportions.

One important thing to emphasize is that it is recommended you use a horizontal/rectangular image for big screen sizes such as desktop screens as the large screens have a horizontal layout and the image needs to expand more horizontally than vertically. This ensures a good visual balance in the layout. This is why we provided two images: one for desktop screens and one for tablet and mobile screens. The image we used for the latter is square shaped to fit the layout better. You can either use the same image for all screen sizes, cropping the image for smaller screens or use two different images.

CSS

.container::after,
.container::before,
.row::after,
.row::before {
	content: " ";
	display: table;
}
.container::after,
.row::after {
	clear: both;
}
.row {
	display: block;
}
.section-text {
	background: #fafafa;
	overflow: hidden;
}
.section-text .picture {
	width: 48%;
	float: left;
}
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}
.section-text .picture img {
	height: 491px;
}
@media (min-width: 992px) {
	.section-text .picture img {
		object-fit: cover;
	}
	.container {
		width: 970px;
	}
}
@media (max-width: 992px) {
	.section-text .picture {
		width: 100%;
		overflow: auto;
	}
	.section-text .picture img {
		height: auto;
	}
	.section-text .picture img {
		height: auto;
	}
	.section-text .text-wrapper p br {
		display: none;
	}
}
.section-text .text-wrapper {
	width: 50%;
	float: right;
	padding-top: 94px;
	padding-left: 78px;
}
@media (max-width: 1200px) and (min-width: 992px) {
	.section-text .text-wrapper {
		padding-left: 30px;
	}
}
@media (max-width: 992px) and (min-width: 768px) {
	.section-text .text-wrapper {
		width: 100%;
		float: none;
		clear: both;
		padding: 40px 20px;
	}
	.section-text .text-wrapper p {
		font-size: 16px;
		margin-bottom: 35px;
	}
}
@media (max-width: 768px) {
	.section-text .picture img {
		margin: 0 auto;
	}
	.section-text .text-wrapper {
		width: 100%;
		padding: 35px 30px 60px 30px;
		text-align: center;
	}
	.section-text .text-wrapper h2 {
		text-align: center;
		margin-bottom: 27px;
	}
	.section-text .text-wrapper p {
		font-size: 15px;
		text-align: left;
		line-height: 25px;
	}
}
.section-text .text-wrapper h2 {
	margin-bottom: 35px;
}
.section-text .text-wrapper p {
	font-size: 18px;
	margin-bottom: 50px;
}
.section-text .text-wrapper .btn-primary {
	font-size: 19px;
	background-color: #3d5d6f;
	border-color: #3d5d6f;
	padding: 0.5rem 1rem;
	width: 195px;
}
@media (min-width: 1200px) {
	.container {
		width: 1180px;
	}
}

And here's the final result:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev