Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I tried making the html layout on the picture. The light blue col-md-2 divs contain images, the darker blue col-md-4 is an image too. The pink divs contain text. Please give a simple html layout which does what's on the picture.
of course it's possible. Here is a totally functional example:
Example in Codepen.io
body {
height: 100%;
width: 100%;
}
.container {
width: 1000px;
max-width: 100%;
height: 100%;
background: #E5FF5E;
padding: 100px 100px 100px 100px !important;
}
.row {
min-height: 1000px;
background: red;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.rows {
height: 200px;
margin-bottom: 10px;
}
#left-container {
background: #6AFF98;
height: 1000px;
display: table;
}
#right-container {
background: #6FFFE9;
height: 1000px;
}
#media (max-width: 767px) {
#left-container {
width: 100%;
}
}
#media (max-width: 991px) and (min-width: 767px) {
#left-container {
width: 100%;
}
}
#media (max-width: 991px) {
}
#r1c1 {
height: inherit;
background: #FF76FD;
}
#r1c2 {
height: inherit;
background: #A1FFE8;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="left-container" class="col-md-8">
<div class="vertical">
<div class="rows">
<div id="r1c1" class="col-md-8"></div>
<div id="r1c2" class="col-md-4"></div>
</div>
<div class="rows">
<div id="r1c1" class="col-md-4"></div>
<div id="r1c2" class="col-md-8"></div>
</div>
<div class="rows">
<div id="r1c1" class="col-md-8"></div>
<div id="r1c2" class="col-md-4"></div>
</div>
</div>
</div>
<div id="right-container" class="col-md-4"></div>
</div>
</div>
</body>
Yes it is possible but each '.row' has to have columns inside of it equal to 12 columns. So the parent column divs equal 12 col-md-8 and col-md-4. But the child divs inside the col-md-8 div does not equal 12. So those would have to be 8 and 4 also. Or 9 and 3... as long as it equals 12. It just depends on what the content will be. Also you can contain all that in a div and center that div to the view port.
But that layout is possible. Below I focused on and made an example on the grid system layout you should be using.
I've colored the columns so you can see the grids layout. Hope this helps!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class='main-container'>
<div class='row'>
<div class='col-xs-8' style='Background-color: red; height: 300px;'>
col-8
<div class='row'>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
</div>
<div class='row'>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
</div>
<div class='row'>
<div class='col-xs-8' style='background-color: blue; height: 80px;'>col8</div>
<div class='col-xs-4' style='background-color: black; height: 80px;'>col4</div>
</div>
</div>
<div class='col-xs-4' style='background-color: blue; height: 300px;'>col-4</div>
</div>
</div>
All columns in Twitter Bootstrap are floating elements. So you can't get content centre aligned just by Twitter Bootstrap classes. You can try styles like display: table-cell; vertical-align: middle; on the blocks: col-md-8 and col-md-4.
Check http://jsfiddle.net/rajesh14mar/qc9zfpo6/
Related
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.
Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}
This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>
I have a design where I have 3 divs.
On desktop mode - 2 divs are in the same row, and on mobile mode each of them is a full row, but the order needs to change.
For example this is my HTML (using foundation CSS):
<div class="row">
<div class="mobile-first small-12 large-8 columns">FIRST</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
<div class="row">
<div class="mobile-middle large-12 small-12">MIDDLE</div>
</div>
What needs to happen when I am on mobile screen is that the "LAST" div will go last, even though it is part of the first row.
Is it possible without duplicating the HTML, using JS or using strange float that will act strange on some devices?
This is the fiddle I've made:
Fiddle
You can wrap mobile-first and mobile-middle divs into an additional column. Then apply negative margin-right to the mobile-middle div on the wide screen.
Please check the result:
1) Bootstrap
https://jsfiddle.net/glebkema/ss8zbf6z/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media (min-width: 992px) {
.mobile-middle {
margin-right: -33.33333333% !important;
width: 150% !important;
}
}
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="mobile-first col-xs-12">FIRST</div>
<div class="mobile-middle col-xs-12">MIDDLE</div>
</div>
</div>
<div class="mobile-last col-md-4">LAST</div>
</div>
</div>
2) Foundation
https://jsfiddle.net/glebkema/sbzgwf8t/
.container {
margin: 0 auto;
max-width: 500px;
}
[class|="mobile"] {
height: 100px;
}
.mobile-first { background-color: blue; }
.mobile-last { background-color: red; }
.mobile-middle { background-color: green; }
#media screen and (min-width: 64em) {
.mobile-middle {
margin-right: -33.33333% !important;
width: 150% !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">
<div class="container">
<div class="row">
<div class="small-12 large-8 columns">
<div class="row">
<div class="mobile-first small-12 columns">FIRST</div>
</div>
<div class="row">
<div class="mobile-middle small-12 columns">MIDDLE</div>
</div>
</div>
<div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
</div>
As per #moped suggest. I can use same row div for all the colums.
The solution is simple if they are all in the same div, I can use display: flex.
#media only screen and (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.mobile-first{
order: 1;
}
.mobile-last{
order: 3;
}
.mobile-middle{
order: 2;
}
updated fiddle
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
I am using Twitters Bootstrap grid system to create a site header like the example below:
This all works fine until you begin reducing the size of the screen in which case the title of the page and logo merge together like this:
Ideally I would like the end result to look like this when in a phone viewport:
Here is my current code
HTML
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
<h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3>
</div>
</div>
</div>
CSS
.classHeader
{
position: relative;
padding: 0;
height: 120px;
width: 100%;
margin: 40px 0 0 0;
border: 1px solid black;
}
.smallLogo
{
height: 115px;
width: 180px;
padding: 10px;
}
.fullWidth
{
width: 100%;
}
.bottomAlign
{
position: absolute;
bottom: 0;
}
.fifteenPxSpacing
{
margin: 15px;
}
And here is a Fiddle so that you can see exactly what is going on when you resize the browser to smallest.
Im aware that different browsers allow different minimum browser sizes in desktops, laptop etc so for reference im using Firefox 35.0
What I have tried
I tried setting the bootstrap columns to two as opposed to one column where each would have 50% of the row each but this didnt work.
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12"> //setting as one containing row first
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><img class="pull-right smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" /></div> //then attempting to break into two columns within parent row
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h3 class="fifteenPxSpacing pull-left bottomAlign">My New Title</h3></div>
</div>
</div>
</div>
your need to add the media query for this : also see the jsfiddle: http://jsfiddle.net/zj9v81t7/9/
#media screen and (max-width:640px){
.fifteenPxSpacing {
margin: 5px;
}
.pull-left {
right: 0;
}
}
You can add the col-xs-* classes to logo and header then it will be increased and decreased as per screen size. That i have done in my updated code you can check fiddle.
http://jsfiddle.net/swapnilmotewar/zj9v81t7/6/
.classHeader
{
position: relative;
padding: 0;
height: 120px;
width: 100%;
margin: 40px 0 0 0;
border: 1px solid black;
}
.smallLogo{
width: 100%;
height: 115px;
padding: 10px;
}
.fullWidth
{
width: 100%;
}
.bottomAlign
{
position: absolute;
bottom: 0;
}
.fifteenPxSpacing
{
margin: 15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.2/d3.min.js"></script>
<div class="pull-left fullWidth container">
<div class="row">
<div class="classHeader col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-6 pull-right ">
<img class="smallLogo" src="http://identityview.net/wp-content/themes/identityview/templates/Corporate-Logo-With-Flower-Motif-single.png" />
</div>
<h3 class="fifteenPxSpacing pull-left bottomAlign col-xs-6">My New Title</h3>
</div>
</div>
</div>