How can I make responsive layout like this?
I need only few tips how to do it. I dont need full source code. Sorry for my english.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src='https://via.placeholder.com/350x150' />
</div>
<div class="col-md-6">
CONTENT
</div>
</div>
<div class="row">
<div class="col-md-6">
CONTENT
</div>
<div class="col-md-6">
<img src='https://via.placeholder.com/350x150' />
</div>
</div>
</div>
I want img to be half page size.
Check fiddle and snippet below. It is fully responsive and it is working in any device.
body {
padding:15px 0;
}
.content-box {
position:relative;
width:100%;
min-height:350px;
background:#ccc;
margin:15px 0;
}
.img-box.left {
position:absolute;
top:-15px;
right:-15px;
bottom:-15px;
width:calc( 50vw - 15px );
background:red;
}
.img-box.right {
position:absolute;
top:-15px;
left:-15px;
bottom:-15px;
width:calc( 50vw - 15px );
background:red;
}
#media only screen and (max-width: 768px) {
.img-box.left, .img-box.right {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
background:red;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class=container>
<div class="row">
<div class="col-md-6">
<div class="content-box">
<div class="img-box left">
image
</div>
</div>
</div>
<div class="col-md-6">
<div class="content-box">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="content-box">
</div>
</div>
<div class="col-md-6">
<div class="content-box">
<div class="img-box right">
image
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/
This works for you...Check and let me know if need any help.
Thanks.
here's your layout with bootstrap 4. put image into box--wide but keep in mind pink divs are absolutely positioned so they will not resize the parent - they will take full parent's height which depends on content in gray box
to make this responsive - my suggestion is to wrap images into .col-12and for desktop set it's to position static while images are absolute so they will align inside .container, not .col-12 and on mobile images should be just static
.container {
background: #5f408c;
padding: 20px;
}
.container h1 {
text-align: center;
color: white;
}
.box {
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
text-transform: uppercase;
font-size: 40px;
}
.box--wide {
position: absolute;
left: 15px;
right: calc(50% + 15px);
}
.box--wide:last-child {
right: 15px;
left: calc(50% + 15px);
}
.box--pink {
background: #ec008c;
}
.box--gray {
background: #272827;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<h1>TITLE</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="box box--pink box--wide">image</div>
<div class="col-12 col-md-6 offset-md-6 ">
<div class="box box--gray">content</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="box box--gray">content</div>
</div>
<div class="box box--pink box--wide">image</div>
</div>
</div>
Related
I have a problem regarding the following layouts
.box1 {
background: green;
height: 80px;
}
.box2 {
background: red;
height: 270px;
}
.box3 {
background: blue;
height: 200px;
}
.box4 {
background: yellow;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<h1>Layout 1</h1>
<div class="container">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box4">box4</div>
</div>
</div>
<hr />
<h1>Layout 2</h1>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box1">box1</div>
<div class="box3">box3</div>
</div>
<div class="col-md-4">
<div class="box2">box2</div>
<div class="box4">box4</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
Both are correct in some way and wrong in others
Layout 1 stacks the columns in the correct order (box1,2,3,4) on mobile screens,
but on desktop screens there are undesired gaps between the content due to different content sizes. This is the current layout I am working with.
Layout 2 does not show the gaps of layout 1, but the columns do not stack correctly (box1,3,2,4).
I understand why both layouts behave the way they do.
How can you create a layout that combines the desired results of both layouts using bootstrap or plain css? (note that the project I am working on uses an older version of bootstrap).
Thanks
Edit
The box heights can vary from page to page. I have just set them in a way that illustrates the problem.
It is dirty but I managed it this way:
#media (min-width: 992px){
.layout-1 .box3{
margin-top: -190px;
}
.layout-1 .box4{
float:right;
}
}
I am still searching for something nicer.
DEMO
.box1 {
background: green;
height: 80px;
}
.box2 {
background: red;
height: 270px;
}
.box3 {
background: blue;
height: 200px;
}
.box4 {
background: yellow;
height: 100px;
}
/*** ADDED ***/
#media (max-width: 991px){
.layout-3 .row:first-child{
display:flex;
flex-direction: column;
}
.layout-3 .box1{order:1;}
.layout-3 .box2{order:2;}
.layout-3 .box3{order:3;}
.layout-3 .box2{
position: relative;
}
}
#media (min-width: 992px){
.layout-1 .box3{
margin-top: -190px;
}
.layout-1 .box4{
float:right;
}
.layout-3 .row{
position: relative;
}
.layout-3 .box2{
position: absolute;
top: 0;
right: 0;
}
.layout-3 .box4{
float:right;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<h1>Layout 1</h1>
<div class="container layout-1">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box4">box4</div>
</div>
</div>
<hr />
<h1>Layout 2</h1>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="box1">box1</div>
<div class="box3">box3</div>
</div>
<div class="col-md-4">
<div class="box2">box2</div>
<div class="box4">box4</div>
</div>
</div>
</div>
<h1>Layout 3</h1>
<div class="container layout-3">
<div class="row">
<div class="col-md-8 box1">box1</div>
<div class="col-md-8 box3">box3</div>
<div class="col-md-4 box2">box2</div>
</div>
<div class="row">
<div class="col-md-4 box4">box4</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>
I made an example to represent my current issue.
I want this structure. I tried height: 100% on the blue part but it didn't work, so I gave height: 80vh.
This is an issue because nothing is aligned anymore and gets worse if you make the windows smaller or bigger (not responsive).
How do I make the left and right side of the content aligned at the top and bottom with a margin-top of 5px to the black part?
.red {
background: red;
}
.blue {
background: blue;
height: 80vh;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
I tackled something similar to this and whipped up a jQuery solution to it that you might want to try, it's been working great for me.
Basically the function gets the height of the column you know is going to be the tallest. If that content is larger than the others it sets the height of the others to the same of the taller piece of content.
$(document).ready(function () {
var tallest = $(".red").height();
var shortcolumn1 = $(".blue").height();
if (tallest >= shortcolumn1) {
$(".blue").css("height",""+ tallest +"px");
$(".green").css("height",""+ tallest +"px");
}
else {
}
});
Change CSS, Your Footer height 25px;
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
add display:flex for the main row, min-height:100% for the col-xs-6 and height:100% for the blue box the code should look like:
.red {
background: red;
}
.blue {
background: blue;
height: 100%;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
.d-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mh-100{
min-height:100%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row d-flex">
<div class="col-xs-6 mh-100">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6 mh-100">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
I have an image I am trying to replicate as seen in the image. I am trying to use bootstrap to limit the CSS.
The image I am copying is this
I have being trying to wrap my head around it but can't seem to figure it out. Below is an example of the code I have so far
<div class = "container col-md-offset-2">
<div class="row">
<div class="col-md-8 ">
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
<div class="row">
<div class="col-md-12 well"><img class = "img-responsive" src=""></div>
</div>
</div>
<div class="col-md-4 well"><img class = "img-responsive" src=""></div>
</div>
</div>
.banner_text {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 36px;
}
.banner_wrapper {
background: lightgreen;
height: 250px;
}
.left_wrapper_block {
height: 150px;
padding: 30px;
margin: 10px 0;
background: lightblue;
}
.right_wrapper_block {
padding: 30px;
margin: 10px 0;
background: lightyellow;
height: 310px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 banner_wrapper">
<p class="banner_text">Latest News</p>
</div>
</div>
<div class="row">
<div class="col-md-6 left_wrapper">
<div class="left_wrapper_block">
<p>Resources</p>
</div>
<div class="left_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
<div class="col-md-6 right_wrapper">
<div class="right_wrapper_block">
<p>Lorem Serum</p>
</div>
</div>
</div>
</div>
I am trying to achieve this:
I want the three panels in the gray <div> to overlap with the white jumbotron above them. How can I do this in CSS or with Bootstrap?
HTML:
<div id="home-page">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
<div class="col-sm-4">
<div class="panel">
</div>
</div>
</div>
</div>
<div class="container">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
</div>
CSS
#home-page { background: #EFEFEF; }
#home-page .panel { box-shadow: 0px 0px 10px gray; margin: 15px; }
Thanks!
I was able to replicate the pic you had with a few adjustments to your code:
here is the css:
#home-page {
background: #EFEFEF;
}
#home-page .panel {
box-shadow: 0px 0px 10px gray;
margin: 15px;
margin-top:-50px;
height:200px;
}
#jumbo{
height:100px;
}
I also added a div on top to get that effect
<div id="jumbo"></div>
please see my codepen
http://codepen.io/sammyb123/pen/dMJaRw
View below snippet in Full page. If you want the same effect on smaller devices then use col-xs instead.
#home-page .panel {
box-shadow: 0px 0px 10px gray;
height: 250px;
margin-top: -15px;
}
#home-page .jumbo-ctr {
background: #fff;
margin-bottom: 20px;
}
#home-page .panel-ctr {
background: #EFEFEF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="home-page">
<div class="container jumbo-ctr">
<h3>Passionate About Technology?</h3>
<p>We make and effort to learn something everyday</p>
LEARN
</div>
<div class="container-fluid text-center panel-ctr">
<div class="row">
<div class=" col-sm-offset-3 col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel">
</div>
</div>
<div class="col-sm-2 ">
<div class="panel"></div>
</div>
</div>
</div>
</div>
I am trying to achieve the similar display for the highlighted part in the picture with yellow and black background. The three boxes displaying half in the yellow and half in the black bg.
Can anybody help me deal with it in CSS BOOTSTRAP.
Thanks in advance.
http://i.stack.imgur.com/yPj0w.png
The 3 boxes are simply positioned absolutely over a background image.
See this-
#bgbox {
background-color: black;
border-left: 50px solid yellow;
width:50px;
height:100px;
}
#top {
position:absolute;
top:40px;
left:40px;
width:30px;
height:30px;
background-color:blue;
}
<div id="bgbox">
</div>
<div id="top">
</div>
use position for doing this.Demo
<div class="top">
<div class="inner"></div>
</div>
<div class="buttom">
</div>
.top{
position:relative;
width:100%;
height:300px;
background-color:yellow;
}
.inner{
position:absolute;
width:300px;
height:300px;
top:50px;
left:100px;
background-color:red;
z-index:3;
}
.buttom
{
position:relative;
width:100%;
height:300px;
background-color:black;
}
Use the Bootstrap class and arrange the boxes by margin top value . look the code below. run it on full screen
.yellowbg { background-color: #beb333; height: 300px; }
.blackbg { background-color: #000; height: 300px; }
.yellowboxes { height: 182px; margin-top: -118px; background-color: #e3cf00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="yellowbg">
</div>
<div class="blackbg">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-offset-3 col-sm-2">
<div class="yellowboxes">
Box 1
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 2
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="yellowboxes">
Box 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>