I currently have two Divs next to each one big div like this:
The reason why I don't use a row instead of putting every div as a single one is that I need "DIV2" in the Mobile version to be between the two other divs.
But the big space between DIV1 and DIV3 ruins everything, how can i remove the spacing without losing my wanted layout?
HTML Code:
<div class="DIV1 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
<div class="DIV2 col-xs-12 col-sm-4 col-md-4 col-lg-4" />
<div class="DIV3 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
I use the standard Bootstrap code for the styling
What you can do is do is add float to your divs via the class pull-left or pull-right provided by bootstrap. This will make DIV3 take up the big space.
Check out the fiddle:
https://jsfiddle.net/80r028jq/1/
Both div1 and div3 should be in the same column so put these in a another div and than you can use display:inline-block or display:flex-box;
<div class="fl">
<div class="div1">
<div class="DIV1 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
<div class="DIV3 col-xs-12 col-sm-8 col-md-8 col-lg-8" />
</div>
<div class="DIV2 col-xs-12 col-sm-4 col-md-4 col-lg-4" />
</div>
.fl
{
display:flex-box;
}
Related
I'm fairly inexperienced in CSS, HTML and bootstrap.
Basically I would like to know how to split a single column on a large screen, into two columns on smaller screen so that the columns two div's sit side by side instead of on top of each other when the window is resized.
<div class= "container-fluid">
<div class ="row">
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<canvas width="800" height="450">
</canvas>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Pseudo">
</div>
<div id="Element">
</div>
</div>
</div>
</div>
I want the Pseudo and element divs to sit next to each other on smaller devices and on top of each other on larger. Its working fine on a large screen.
I'm not sure if I can do that using bootstrap, I have been trying for a long time but having no luck.
You need to define single columns for your element, because defining the external column for both of them is not going to give you the result you are looking for. So, I think that something like this could do the trick:
#Pseudo {
background-color: red;
}
#Element {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class= "container-fluid">
<div class ="row">
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-9 ">
<canvas width="800" height="450">
</canvas>
</div>
<div class="col-xl-9 col-lg-3 col-md-12 col-sm-12 col-3">
<div class="row">
<div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Pseudo">
x
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Element">
y
</div>
</div>
</div>
</div>
</div>
From your code you are not doing anything to make the Pseudo and element divs dynamic.
It's funny because what you are trying to achieve is correct from the perspective of:
<canvas width="800" height="450">
</canvas>
and
<div id="Pseudo">
</div>
<div id="Element">
</div>
These two parts are dynamic. So the same way you implemented this for them you should implement for these divs.
Something like this:
<div class ="row">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Pseudo">
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div id="Element">
</div>
</div>
</div>
And you don't have to worry about the others. Bootstrap accepts nested rows.
I have an element in Bootstrap row. The element takes different amount of columns on xs, sm, md and lg configurations of a screen. I need the element to be in the middle when it takes 12 columns. Is it possible? If so how can I do that?
For example:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
And if I put the row into a div which is fluid I want elements always be in the middle, but when I shrink browser to sm configuration it makes an element take 12 columns by itself and hence I have relatively to the gap on left side huge gap on right.
Oh! There I came out with the idea and it seems to work out. I just add a bit of css to a elements which take columns:
margin:0 auto;
and what the code does is actually centers the elements in their columns.
Yes, #GaneshRadhakrishnan is right, you should use bootstrap's center-text class like this:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
</div>
When my page re-sizes from SM to XS it is adding a white line (almost like a margin space) and I don't know why. If I add a style="margin-top: -1px" it goes away but then messes up the rest of the grid structure. Any ideas as to what is causing this? Below is the code, if you run the snippet and shrink the window you'll see the line appear.
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<title>JPT Email Template Title</title>
</head>
<body>
<div class="container-fluid">
<div class="row" style="margin-top: 20px">
<div class ="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 bg-primary text-center">
<img class="img-responsive center-block" src="http://pages.jerusalemprayerteam.org/rs/591-HWU-361/images/foz-logo.png" style="margin-top: 5px; margin-bottom: 5px">
</div>
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
<div class="row">
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
<div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 text-center bg-primary">
<a href="#">
<img class="img-responsive center-block" src="http://i.imgur.com/i131rzd.jpg" style="margin-bottom: 5px">
</a>
</div>
<div class"col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
</div>
This happens cause you do not use bootstrap properly, you have chosen an option of adding extra divs for offset and it's wrong. Bootstrap has offset for this cases:
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
Your content
</div>
Do not use those extra divs for offset, one of those is giving you this 1px
Columns have a min-height of 1px. So the below creates the white line. Try using .hidden-xs instead.
<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
in addition to previous answers, Bootstrap has not class "col-xs-0".
I'm using Bootstrap right now and i'm having an issue.
This is my code:
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>
My layouts look like this:
But when my calendar height is bigger, this is what happens:
What can I do to fix it?.
I have fixed it! :)
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
CALENDAR
</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">
SECTION 1
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
PICTURES
</div>
<div class="clearfix visible-lg-block"></div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">
SECTION 2
</div>
Just putting clearfix class where before the layout that is moved worked!
Thanks for the answers!!.
I can't vote up your comments because I don't have enough reputation :(.
Using containers and rows as the Bootstrap team intended, it's easy to keep things aligned:
<div class="container-fluid">
<div class="row">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Calendar
<br>Calendar</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">Section One</div>
</div>
<div class="row">
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Section Two</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">Section Three</div>
</div>
</div>
Demo
You should use a wrapper around your calendar and make it .col-md-6 and then another around your second section and add the .col-md-6 class also. Like this, you would make sure that both your section will always talke half the screen. (You can also use other classes sm, xs and etc depeding on the layout you want to have)
For example:
<div class="col-md-6">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
</div>
<div class="col-md-6">
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
</div>
This way, you'd have to review also for example your seccion and calendar, because now the whol col-md-6 will contains 12 columns also. Hope it helped. You might want to review the Grid system in there also:
http://getbootstrap.com/css/#grid
I'm using Bootstrap css grid layout it works great.
I haven't found an example where it can be responsive and convert 3 columns and 2 rows into 2 columns and 3 rows.
What it does is create single column of 6 rows. I can convert even columns from 4 to 2 but how to do 3 as they are in 2 different rows?
I thought if there is solution for an even number of columns then it could be done for odd.
Try using
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
Take into consideration that you may have to think outside of the box (punny I know) on this one. It may help visualize it better if you drew out the different stages first.
Then consider you may not need rows, except the one to contain the columns. In Bootstrap extra columns will force a second or third row automatically.
http://getbootstrap.com/css/#grid-example-mixed
You have 6 total divs. Then just adjust the column class width numbers.
Now you didn't say if you wanted the three columns on a desktop-sized screen or a mobile. I'm going to assume here, for the sake of simplicity, that the 2 columns layout is a mobile layout.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
</div>
You CAN switch it up, but why put that many columns into such a small space... there could be reasons to do it that way but it's not common due to finger-width issues. However, Bootstrap is that level of flexible.
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
</div>
Edit
There are also ways to keep it centered using offsets, if you have say a 7 column layout. It just requires adjusting the width of the columns and then adding offsets to keep it centered.
http://getbootstrap.com/css/#grid-offsetting
An important thing to remember when adding an offset, is that the col width plus the offset cannot equal 12 or it will be pushed all the way to the right. It also works best when the column width is an even number (2, 4, 6, 8, or 10).
You can practice in JSfiddle or CodePen (codepen live updates in a WYSIWYG viewer).