CODEWITHSUNDEEP
csslesstwitter-bootstrap-3
Gisto
Gisto

Reputation: 886

Display grid (columns and gutters) in Bootstrap 3?

I've seen this come up a few times but for older versions of Bootstrap.

Looking for an easy way to highlight the grid - both the columns and the gutters.

Here's what I found so far:

https://gist.github.com/procload/1988163 - returns an error with @function

https://github.com/ricardovf/bogrid - Ctrl-G still brings up the find

http://alefeuvre.github.io/foundation-grid-displayer/ - Sort of works, shows columns in full width but not anything narrower.

Easy way to see the Bootstrap grid? - Works for Bootstrap 2.3, doesn't work for 3. However it will only show the combined columns, not each individual column within combined columns. (Edited)

[Edit] Ideally, the column overlay would show all the columns that the examples on this page are displaying: http://getbootstrap.com/examples/grid/

Open to any ideas, thanks!

Upvotes: 1

Views: 2049

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362350

Use this to highlight the grid columns:

.row [class*='col-'] {
      background-color: #ffeeee;
      background-clip: content-box;
}

http://codeply.com/go/pejyqLlrBF

Upvotes: 1

Yooz
Yooz

Reputation: 2518

I changed the HTML/css of the last example, and I get some result, 

[class*="col"]:hover { background: #000; }
[class*="col"] [class*="col"]:hover { background: red; }

DEMO:http://jsfiddle.net/xFq47/

is that what you'r looking for?

Upvotes: 1

Related Questions