Bootstrap comes with a set of nice styles for a table.
I however need that same style but for a div with table-like content.
I took a look at the css and there's a complicated hierarchy of css selectors that target each tag of the the table. I could update the bootstrap css to target my div but that is messy.
Is there no quick way to apply bootstrap css table styles to my div with .row and .cell inner divs?
There are a copious amount of other libraries you can utilize that are much smaller and minimalistic in size.
One of the slimmest variations I've used in the past would be the:
960 Grid System
Make a custom CSS file here, without all of the extra necessities of bootstrap.js.
http://grids.heroku.com/
Learn More:
http://960.gs
It's not exactly a table system, but you can just create full length rows and chalk it up the same way.
See here: http://grids.heroku.com/fluid_grid?column_amount=5
Related
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
I have this simple code with Twitter Bootstrap 3: http://jsfiddle.net/korjavin/xUJGV/3/.
(result only: http://jsfiddle.net/korjavin/xUJGV/3/embedded/result/)
I am confused that rows with lorem-lipsum text have not any vertical margin.
I can add margin-top to custom.css but connect it to all classes like col-sm-1(2 ..), col-xs-*, col-* ... looks like bad solution.
What is the best solution to add vertical margin for all Bootstrap grid classes?
The best solution is to respect Bootstrap rules on element nesting. A container, within it a row, within it some col that don't exceed 12 in total. Then, every paragraph wrapped on a <p>tag, and so on.
Basically your problem is about correctly using Bootstrap elements, not about CSS.
Check an improved version of your fiddle, also in full screen.
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I'm looking into creating a set of css grid classes for webkit only browsers. Should be simillar to blueprit/bootstrap/compass, however I'd rather not use those because they rely on float positioning.
I'd like something like this:
span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}
and so on. Would there be any benefit to using display:table-cell vs inline-block for this? Or is there a better approach?
Actually display: table is really the solution you are probably looking for (because of your target browsers). It was added to browsers so people could get a grid layout without needing to use a table. You don't even need percentages (the number of columns you add will dictate the width of the children elements).
DEMO
The only real caveat comes in when you are doing mobile browsers and want a dynamic layout shift (media tag) to go from a horizontal list to a vertical list. I guess it is not too big of a deal to add you own media tags (and add a class to the wrapper)...
You probably could get display: inline-block working but make sure you use box-sizing: border-box because when you are working with percentages, even a single px off and things start wrapping..