Our website is currently using Bootstrap 3, and one of our team members has proposed a new template design that deviates from the typical Bootstrap grid layout. I've attempted to implement this design but have faced some challenges along the way.
I have outlined the issue in the image provided below. Does anyone have any suggestions or solutions on how I can successfully integrate this design?
One alternative method involves utilizing a CSS pseudo ::before element that adjusts its height in sync with the col-lg-6 container.
#main {
background: lightgreen;
height: 100vh;
}
#main > .row {
height: 100vh;
}
.left {
background: red;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.left:before {
left: -999em;
background: red;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<div class="container" id="main">
<div class="row">
<div class="col-lg-6 left">
..
</div>
</div>
</div>
Another approach is to use an absolutely positioned .container-fluid (full-width) behind the content within the .container, acting as a "ghost" element...
.abs {
position: absolute;
right:0;
top:0;
bottom:0;
z-index: 1;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
<h4>Content</h4>
</div>
<div class="col-sm-6">
<!-- space over image -->
</div>
</div>
</div>
<div class="container-fluid abs">
<div class="row h-100">
<div class="col-sm-6 h-100">
<!-- empty spacer -->
</div>
<div class="col-sm-6 right">
<img src="//placehold.it/1000x400">
</div>
</div>
</div>
(Bootstrap 4)
Related questions:
Achieving Two Columns with Different Background Colors That Extend to Screen Edge
Illustration featuring Image on the Right
Illustration showcasing Image on the Left
Extending an Element Beyond the Bootstrap Container
Here is a different approach to the solution. In this case, you would create an absolute positioned div and place it within a col-xs-6. However, the container should have a position: static.
For a screen width of 1200px or more, where the container width is 1170px, you can calculate the padding-left for the floating div using:
padding-left: calc((100% - 1170px) / 2);.blk {
background: lightgreen;
width: 50%;
position: absolute;
}
.container {
background: tomato;
height: 100vh;
padding: 40px 0;
}
@media only screen and (min-width: 1200px) {
.cell {
position: static;
}
.blk {
left: 0;
right: 50%;
padding-left: calc((100% - 1170px) / 2);
}
}
<div class="container">
<div class="row">
<div class="col-lg-6 cell">
<div class="blk">Lorem ipsum dolor</div>
</div>
<div class="col-lg-6">Lorem ipsum dolor</div>
</div>
</div>
To achieve a seamless background grid that matches the foreground grid, you can utilize absolute positioning and pseudo elements to stretch an image across the screen. By carefully positioning the image within a grid layout, you can create a visually appealing design.
.first .stretch-right::after {
background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.second .stretch-left::after {
background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.stretch-right::after {
content: '';
background-size: cover !important;
background-position: center center !important;
right: 0;
height: 100%;
position: absolute;
left: 0;
}
@media (min-width: 1140px){
.stretch-right::after {
right: calc((-1%) - ((100vw - 1140px) / 2));
}
}
.stretch-left::after {
content: '';
background-size: cover !important;
background-position: center center !important;
right: 0;
height: 100%;
position: absolute;
left: 0;
}
@media (min-width: 1140px){
.stretch-left::after {
left: calc((-1%) - ((100vw - 1140px) / 2));
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="position-relative py-5 first">
<div class="position-absolute w-100 h-100">
<div class="container h-100 bg-container">
<div class="row h-100 d-flex justify-content-between align-items-center">
<div class="col-12 col-md-5 h-100 d-flex"></div>
<div class="col-12 col-md-6 h-100 d-flex stretch-right"></div>
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-12 col-md-5">
<h1>
Nullam dapibus neque id maximus
</h1>
<p>
Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum ligula. Pellentesque vel consectetur diam. In sagittis aliquam eros, at faucibus erat blandit id. Aliquam fringilla sagittis enim sed porta. Donec sed rutrum metus. Fusce nibh orci, tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
</p>
</div>
<div class="col-12 col-md-5 bg-white">
<h3>
I'll stay in the grid
</h3>
<p>
tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
</p>
</div>
</div>
</div>
</section>
<section class="position-relative py-5 second">
<div class="position-absolute w-100 h-100">
<div class="container h-100 bg-container">
<div class="row h-100 d-flex justify-content-between align-items-center">
<div class="col-12 col-md-6 h-100 d-flex stretch-left"></div>
<div class="col-12 col-md-5 h-100 d-flex"></div>
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-12 col-md-5 bg-white">
<h3>
I'll stay in the grid
</h3>
<p>
tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
</p>
</div>
<div class="col-12 col-md-5">
<h1>
Nullam dapibus neque id maximus
</h1>
<p>
Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum...
</p>
</div>
</div>
</div>
</section>I'm not entirely clear on your message. Here is my interpretation:
<div class="container" style="width:1200px">
<div class="row">
<div class="col-lg-6">
</div>
</div>
</div>
Check out the DEMO: http://jsfiddle.net/jayjay95/ybx97y2c/
(If this meets your needs, update the container width from 200px to 1200px and change col-xs-6 to col-lg-6.
To style the element, include the following CSS:
width: calc(100% + 30px); // Expands to full width with an extra 15px padding on either side
margin-left: -15px; // Centers the element
I managed to find a solution to the problem and wanted to share it here for others to benefit from.
#cont {
background-color: #F8F9FA;
position: relative;
}
#cont:before {
left: calc((50vw - 50%) * -1);
background: #F8F9FA;
content: '';
display: block;
position: absolute;
width: calc(50vw - 50%);
top: 0;
bottom: 0;
}
#cont:after {
right: calc((50vw - 50%) * -1);
background: #F8F9FA;
content: '';
display: block;
position: absolute;
width: calc(50vw - 50%);
top: 0;
bottom: 0;
}
Feel free to implement the following code snippet:
<!DOCTYPE html>
<html class=" desktop landscape" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
.side{background-color: lightgrey;
}
.middle{background-color: green;
}
.red{background-color: red;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 1st section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 2nd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 3rd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
My task involves reformatting predefined HTML using CSS to achieve a different layout. The HTML is received as an error message from the server and is not editable. .server-errors ul { list-style: none; } .server-errors li:before { content: "D"; f ...
I have created an HTML file and the corresponding controller logic for this page. I can see the data in the console, but it's not displaying on my UI. <div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController"> < ...
Take a look at this snippet of HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/test.css" rel="stylesheet"> </head> <p></p> <h2>Meeting the Old Guard ...
I'm working on a React.js app with Typescript and I need to remove the default visited Material Icons coloring from an anchor tag. Here's the stylesheet I tried: const useStyles = makeStyles((theme: Theme) => createStyles( myAnchor: ...
I'm experiencing an issue with my SVG where a linear gradient defined in CSS is not displaying properly. Even though the second color stop rule is correctly set to orange, only the first color is showing up in the rendered image. I've been trying ...
.custom-highlight { display: inline; font-weight: 500; font-size: 15px; } .item-list { border: 1px solid #b1b8c9; color: $color-grey-light; font-size: 14px; display: inline-block; margin-right: 8px; padding: 5px 20px; border-radius: 4p ...
Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...
In my Angular JS directive, I have implemented a feature to export SVGs to PNG. While this functionality works seamlessly in most browsers, it encounters a security error in IE. Despite my numerous attempts to troubleshoot the issue, I have been unable to ...
Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...
Issue with Input Switching on Chrome for Android I am facing difficulty when trying to switch between two input fields. The HTML code is as follows: <input type="text"/> <input type="text"/> When I enter text in the first input and click on ...
In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS. Typically, adjusting the opacity is my go-to solution to achieve the desired effec ...
I have developed an Angular application that includes a table and buttons to switch between different data sources for the table. To enhance user experience, I want to display a spinner while switching data sources. However, I am facing an issue where th ...
I currently have functional code that retrieves an image inside a div. However, upon checking it on mobile devices, the image appears too small. When I attempt to increase its height, it becomes disproportionate. As a solution, I am attempting to set the i ...
Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page. During testing, I keep seeing ${resultItem.name}, and when I ...
I am attempting to connect a CSS template that is serving static backend content through Flask with my React frontend. Here is the structure I am working with: client/ src/ components/ menu.jsx public/ ...
My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...
Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...
There are some apps I've come across that only request access to users_photos and publish_actions (not publish_stream or photo_upload). Surprisingly, they are able to upload photos without being approved for User Generated Photos (e.g. Instagram). Wh ...
This question may have a strange title, but I couldn't think of anything better to call it. So, here's the situation: I have a grid layout where I need my .search-wrapper to be 50% wide and floated to the right. In my demonstration on jsfiddle, ...
After successfully creating a responsive menu that toggles with a hamburger icon at 1205px resolution, I encountered an issue. Once the hamburger icon is clicked and the dropdown menu opens, there seems to be no way to close it. I am looking to add an X bu ...