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>
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I am looking to have all the elements in my div (which is a bootstrap column actually) while keeping the text in there left-align.
So my code looks like this :
I want the p, span and a to be horizontally centered, while their content (the texts) should be left-align.
<div class='col-sm-4 col-md-4'>
<p>...</p>
<span>...</span>
<a>...</a>
</div>
(the number of columns varies, I have 3 here, but that could be more really).
What I tried to do in my css was to add some left-padding in percentages according to the number of columns. It does work quite well, but I am sure there is an easier way to achieve this.
by the way, dont forget to add "class=" ;).
If i understood you right, there are two possibilities.
first:
<div class="col-md-12">
<div class="col-md-4 .col-md-offset-4">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
This would create an offset of "col-md-4". Thus, 4 - 4 - 4, it would be centered.
Another, neater solution would be:
<div class="col-md-12">
<div class="wrapper" style="width:300px;position:relative;margin-left:auto;margin-right:auto;">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
That way you create a wrapper that is centered through setting the margins left and right automatically.
For that solution you need to provide the position(relative etc, but not static) and the width!
hope it helps.
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>
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
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)