I am using bootstrap for making responsive website but when I am giving padding to elements to adjust them in particular column it is breaking in other devices.
I am giving padding in % still it's breaking.
What should I do?
What is the best way to adjust elements within a particular column?
You should keep the grid elements intact. Add children inside them to add padding.
<div class="row">
<div class="col-md-8">
<div class="element-with-padding"></div>
</div>
<div class="col-md-4">
<div class="element-with-padding"></div>
</div>
</div>
Related
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?
Figure A on size col-md or larger
And when screen is col-sm or col-xs, go to B or C. (2 different solutions).
I'm looking for the correct div layouts for A->B and A->C.
The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.
The following DOES NOT work...
Fiddle ... https://jsfiddle.net/s4jj30wf/
<div class="row">
<div style="background:blue" class="col-xs-12 col-md-4">
<div style="height:100px"></div>
</div>
<div style="background:yellow" class="col-md-8 col-xs-12">
<div class="row">
<div style="background:green" class="col-md-12 col-xs-12">
<div style="height:20px"></div>
</div>
<div style="background:pink" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
<div style="background:red" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
</div>
</div>
<div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
<div style="height:50px"></div>
</div>
</div>
Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.
Sample pure css with fixed height of columns:
http://codepen.io/Nasir_T/pen/ZBOgoe
If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.
Sample jQuery & css solution with dynamic column height:
http://codepen.io/Nasir_T/pen/VmjoPd
Hope this helps.
I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-
In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.
Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc.
But duplicating content is usually not wise idea.
I have row with 2 columns. I want the columns to span the whole width of the row and have a margin between them. This way they align with the rows above and beneath.
The default options add margins to both sides of the columns, which doesn't work for me because then the columns don't align with the other rows. I discovered the class "collapse' which removes the default margins, but I still need that margin between the 2 columns.
I can fix this creating my own classes and modifying my markup a little bit, but I want to make sure Foundation doesn't do this for me somehow.
Do you have any advice or best practice for handling this scenario?
I've attached an image to show you what my design calls for.
Thanks!
https://gist.github.com/slawaEremin/7993669
If I understand right, you need add some block inside columns.
The problem is that you always should wrap your content using .row and *-12, if there is only one column:
For example:
<div class="row">
<div class="small-12 columns">
Some content
</div>
</div>
<div class="row">
<div class="small-6 columns">
Some content
</div>
<div class="small-6 columns">
Some content
</div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
</div>
I understand that you need 12 spans in total. Is there a way to still center align the two spans I have horizontally? The above will just float to the left.
I've tried putting a wrapper around them and margin auto'ng it but nothing happens.
I can go and remove the span class and just add a specified width but I need span class for fluid layout.
If you want to center two columns of span4 you can use offset param like this:
<div class="row">
<div class="span4 offset2"></div>
<div class="span4"></div>
</div>
Remember this may crash in lower resolutions. To prevent that think about using fluid grid layout. This is done by changing
<div class="row">
into
<div class="row-fluid">
Hope that helps!
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php