I am having trouble with my bootstrap styling.
I have footer and the cols are col-md -3,3,2,4
This makes the total 12.
The problem is that the contents of each columns differs, my intention is to put equal spacing between each Div in the col.
How will i accomplish this? How can i at least have some space between latest news and quick links
You could add a different diff in your news column that limits it to using only 80% of the available width. Ensuring you always have at least part of the column left over as spacing.
E.g.
<div class="row">
...
<div class="col-md-4">
<div style="width:80%">[content]</div>
</div>
...
</div>
You should probably give the inner column a class instead of the style to make it cleaner.
Alternative
Actually, it's likely easier to just give your column(s) a padding-right: 20%.
Related
I just started using Bootstrap 3. I am having a difficult time
understanding how the row class works.
Is there a way to avoid the padding-left and padding-right?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
http://jsfiddle.net/petran/rdRpx/
In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.
The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.
The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.
UPDATE:
You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
See my reply below to similar post.
Why does the bootstrap .row has a default margin-left of -30px?
You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.
I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.
#Michelle M. should receive full credit for this Answer.
She said in one of the Comments:
Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for
me.
You would need to update your first div Element like so:
<div class="row mx-auto" style="background:#000000">
No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.
For any future developers debugging this problem:
Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.
I just started using Bootstrap 3. I am having a difficult time
understanding how the row class works.
Is there a way to avoid the padding-left and padding-right?
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
http://jsfiddle.net/petran/rdRpx/
In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.
The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.
The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.
UPDATE:
You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
See my reply below to similar post.
Why does the bootstrap .row has a default margin-left of -30px?
You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.
I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.
#Michelle M. should receive full credit for this Answer.
She said in one of the Comments:
Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for
me.
You would need to update your first div Element like so:
<div class="row mx-auto" style="background:#000000">
No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.
For any future developers debugging this problem:
Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.
I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.
The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :
Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.
So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?
Here is a Codepen to illustrate the problem : codepen.io/anon/pen/BKZaWe
I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.
Have you tried: http://getbootstrap.com/css/#grid-example-fluid?
<div class="container-fluid">
<div class="row">
...
</div>
</div>
EDIT
I think I understand now (really hard from such a small screen shot and no code example).
The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.
Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.
Depending on your browser support, Flexbox is the perfect solution here.
Otherwise, you will have to do something like:
<div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>
To force the first column wider for the sm viewport.
two ways you can do it
1.give just call table responsive class for the table.
2.create an table using div with display: table, display: table-row, display: table-cell properties
http://www.html-cleaner.com/
I think it will do the trick for you.
Else share the code then i can look in deep into it
I need to create a page layout like in the following illustration with twitter bootstrap:
The left and right sidebars should have a width of at least lets say 300px. If there is more space they can grow but they should not shrink (elsewhere navigation links will get cut).
The middle column should fill the entire space left.
I have tried it by assigning a min-width to the sidebar spans, but in this case the last sidebar (b) will switch to the next line if the browser content area width gets below 1300px.
I`m not using responsive twitter bs css.
Is there a way to avoid this ? I have already found some approaches, but only without bootstrap, which do not work for me.
As the site I am talking about is already running I will not paste code here but please take a look at it live at http://kunden.tommy-computer.at/fsv_noetsch/ (german)
Thank you for your help !
Best regards,
Thomas
If you use Bootstrap 2 responsive you can do something with fixed sidebars on the left and right.
<div class="row-fluid">
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
<div class="span6">
main content
</div>
<div class="span3">
<div class="sidebar-nav-fixed">
...
</div>
</div>
</div>
example: http://bootply.com/60284
You can decrease/increase the spanX accordingly if you want sidebars narrower/wider etc..
Related
Bootstrap 4 Holy Grail Layout
finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
You are using a grid system, so you should stick with the given grids widths. (even tought 99% of my clients who wants their design to be coded with bootstrap never respect the grid system and use random width, that kills the point of using a grid system)
If you change the width for one grid you must change it for the other too or it won't fit. (a.k.a you must edit the .span8 width to fit the content).
When using the Blueprint CSS framework, I wanted to remove the margin between all columns. Unfortunately, when I remove these margins, any div that spans all columns now appears wider than the total combined width of the divs on those rows that have had margins removed. The effect is worse on those rows that have many columns.
For those rows in which I'm using all 24 columns, I want the right edge of the divs to line up. Can this issue be resolved without resorting to a bunch of Blueprint hacks, or without manually resizing a container or something by just the right number of pixels to account for the missing margins?
Code in Head:
<style type="text/css">
.topnav{background-color:blue;}
.logo{background-color:yellow;}
.icons{background-color:orange;}
.search{background-color:red;}
</style>
Code in Body:
<div class="container">
<div class="span-24 first last top topnav">Top Nav</div>
<div class="span-5 first logo">Logo</div>
<div class="span-3 append-8 icons">Icons</div>
<div class="span-8 last bottom search">Search</div>
</div>
If you really need to remove the margins between the columns (I doubt that's the case, but without more info I cannot provide more help) then the best thing would be to redo the entire grid. Here is a generator for blueprint, where you can specify all needed variables, including the gutter (margin between columns): http://ianli.com/blueprinter/