Bootstrap Cols empty Space 700-900 Width ~ Why? - html

I have an issue with bootstrap atm. and cant figure out why my col elements create wierd empty spaces. It should be a simple issue but I am searching for an hour now and still cant find the solution.
Website with the problem: http://www.concierge-service-dortmund.de/
Its happens on all browsers at width 700-900 ~
Thats the problem screenshot: http://puu.sh/lAogM/bbaef8e510.jpg
I`ve tried some solutions which I found here but they didnt worked and actually the issues there were a bit more complex.
Thanks!

Thats a float issue. The "Gardinenwäsche" div needs a clear: left; to repair the DOM.

The row which separates the blocks has "margin-left: -15px;" and "margin-right: -15px;" and this is causing the boxes jump underneath.
To fix this, add a class to the div with rows (there are 4 on the site) to remove the margin.
<div class="row noMargin">
CSS:
.noMargin {
margin: 0 !important;
}

Bootstrap columns allow nesting! Since you're using 1 2 or 4 columns you can change your markup to the following:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12 col-lg-6">
</div>
<div class="col-xs-12 col-lg-6">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-12 col-lg-6">
</div>
<div class="col-xs-12 col-lg-6">
</div>
</div>
</div>
</div>
OffTopic: Bootstrap is "mobile first" remember to add a col-xs-* to every column no matter if it will be 100% anyways, you might prevent some clearing issues with that.

Related

Bootstrap HTML carriage return

After one hour for isolating the problem, I can post this :)
I've a problem with local file but not in production. THe only difference is that on production, html files are inlined.
I'm using default bootstrap 3.3.5 and this css class :
<style>
.v-center {
display: inline-block;
float: none;
}
</style>
My problem is that I don't have the same result with both code :
Code 1 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div><div class="col-md-8 v-center">
col-md-8
</div>
</div>
Code 2 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div>
<div class="col-md-8 v-center">
col-md-8
</div>
</div>
You can found here two examples :
http://relationeo.com/test.html
http://relationeo.com/test2.html
The bug is happening when window with is > 990px.
Why the carriage return breaks the col ?
Thanks
The problem is your CSS class "v-center". It sets the display to inline-block. With inline-block white space comes into play (at least the first character of white space, anyways). Just as you would expect:
Just
Testing
To be rendered as Just Testing rather than JustTesting, the same applies to inline or inline-block elements.
Long and short, don't mess with the Bootstrap grid if you expect to have consistent results. If you need to apply other classes, do so within the grid div, not on the same div. For example:
<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
<div class="v-center">
...
</div>
</div>

What's the meaning of the "row" class in Bootstrap, its difference from containers, and how does it stack with col-***-*?

I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>

Organising divs on different screen sizes with bootstrap 3 grid system

I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull

How to rearrange bootstrap grids in extra small devices

I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}

Positioning the divs using bootstrap in different viewports

I am using bootstrap 3 and I would like to create three divs that change their position depending on the current viewport. I think this should be possible, but somehow i cannot conclude how this can be established using bootstrap. So I have 3 divs, lets call them img text and ex.
I would like them to work for the different viewports as the following image suggests.
I have played around with pull and push, but that does not seems to solve my problem. I am looking for a “pull-up class” so that i can move for example a div to the right (using push) and then be able to move it up.
This is an example that still does not work..
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
EDIT 1: This code is one of the answers to this question that exactly targets the core of the problem. I updated the example image and added another one to illustrate the problem.
This code produces this behaviour (Notice the empty space on the right side of the sm view)
EDIT 2: The accepted answer provides a solution for a fixed size text, img, exp.
For the behavior you want, you need to use the bootstrap push and pull classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
You can see it in action here: http://www.bootply.com/CNGe5KxWxK
More info about pushing and pulling can be found here: http://getbootstrap.com/css/#grid-column-ordering