0

First I was using a table to layout some elements in my page, with the <table> <thead> etc... tags. Then I found that bootstrap has a grid system, and I want to use it for laying out my elements. This went ok for the layout, with <div class="row"> for each <tr> tag and <div class="col-md-12"> for each <td> tag.

However I would like to use some styling provided by bootstrap, such as available for the table at this first example. Is this possible or available?

Right now I just get the layout, but no separation (e.g. borders) between rows like with the table example. Am I going at this the wrong way, or is there actually a way to style this grid in a table like fashion, and how would I do this?

usealbarazer
  • 707
  • 3
  • 10
  • 27
  • could you please post your HTML code? The way that the grid looks is entirely dependent on the classes that you assign to it. – SamHuckaby Oct 10 '14 at 20:04

3 Answers3

0

if you want to add further styles to your boostrap, include an extra style sheet in your HTML, and give your HTML elements an extra class with styling outlined in your added stylesheet. put your class after the bootstrap class when calling it.

so, your html would be

<div class="row my_special_style_class">
user3037493
  • 312
  • 2
  • 8
0

If you're looking to show tabular data, with the lines and styling you like from Bootstrap, use a table and apply the classes that Bootstrap provides (e.g. <table class="table table-striped">).

I like to go to http://getbootstrap.com/css/#tables and use Chrome DevTools or Firebug to inspect the table examples they have on the page. It's much more precise and to the point than reading through their explanations sometimes :)

However, if you just kind of like the lines and stripes, but are just laying out a page (but not using tables), the answer is that you must implement those borders yourself in your own CSS.

Hope that helps.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
ariroseonline
  • 61
  • 4
0

I actually found out fairly quick after asking, how to achieve what I wanted.

You can just use the regular html <table class="table"> (and related) tags for the layout and apply the col-md-6 type classes to the header tags. This way it is styled as a table, but it behaves like a bootstrap grid.

I thought it was required to use div tags for the layout, because all the examples i've seen on the internet used (and said to use) the div tags instead of table tags.

usealbarazer
  • 707
  • 3
  • 10
  • 27