Tables with Bootstrap

Question

I started yesterday with Bootstrap and I’m still on the learning curve. My need is a table with two columns, a form of a grid. In this table I have only two columns: CNPJ and Social Reason. And I do a BD query and bring CNPJ and Reason and fill these columns respectively. Is there an example of something similar? I’m diving headfirst into Bootstrap.

Answer 1

To create the proposed layout, here is the example below :

<div class="container">
  <div class="row">
    <div class="col-md-6">CNPJ</div>
    <div class="col-md-6">Razão Social</div>
  </div>
    <div class="row">
        <div class="col-md-6">123456789</div>
        <div class="col-md-6">Teste</div>
    </div>
    <div class="row">
        <div class="col-md-6">123456789</div>
        <div class="col-md-6">Teste</div>
    </div>
</div>

See the example in http://www.bootply.com/fnNWhNA2Fe

But for your case, I think it’s best to work with a table within a grid. So you can have the table with the two columns, and leave space for other information, as you commented :

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <table class="table">
                <tbody><tr>
                    <th>CNPJ</th>
                    <th>Razão Social</th>
                </tr>
                <tr>
                    <td>123456789</td>
                    <td>Teste</td>
                </tr>
                <tr>
                    <td>123456789</td>
                    <td>Teste</td>
                </tr>
                <tr>
                    <td>123456789</td>
                    <td>Teste</td>
                </tr>
                <tr>
                    <td>123456789</td>
                    <td>Teste</td>
                </tr>
                <tr>
                    <td>123456789</td>
                    <td>Teste</td>
                </tr>
            </tbody></table>
        </div>
        <div class="col-md-6">Outras informações</div>
    </div>
</div>

See the demonstration in http://www.bootply.com/WaMMYR6N16

Answer 2

Bootstrap is an HTML5 and CSS3 framework designed to help you with front-end development of web applications and websites, but its features are more visual-oriented and its programming is more control-oriented. You can use Bootstrap basically for the layout, the main elements it boostrap works on are: Glyphicons, Dropdowns, Button groups, Button dropdowns, Input groups, Navs, Navbar, Breadcrumbs, Pagination, Labels, Badges, Jumbotron, Page header, Thumbnails, Alerts, Progress bars, Media Object, Panels, Responsive embed, Wells, Back to top and Preview Theme you can find information about the use of each of them on official website, there are features like modal and others that are also supported but all are basically geared to layout, if you search only the formatting of the data and you want to use the boostrap for the layout of your page it is a good solution, if you access the part of css on the boostrap website will find examples of how to format your table for it to use the boostrap classes and thus stick to the layout as specified. Just applying the "table" class will already be using part of the boostrap pattern.

<table class="table">
  ...
</table>

If you want to do pagination control while bringing the data to format in a grid allow searching and etc... You will need another resource I advise you on jQuery Datatables which can be used with boostrap layout. Easy to use, simple, well documented and functional. You can apply bootstrap style to Datatable.