Aligning Text in HTML using Bootstrap

Question

Sample

 text a b c d
 text2 a b c d
 text3 a b c d

Result should be

 text              a              b           c           d
 text2             a              b           c           d
 text3             a              b           c           d

How can I do this? Solution may not depend on bootstrap. Just to get a view like this.

Answer 1

With twitter bootstrap 3

<div class="container">
    <div class="row">
        <div class="col-xs-2">textA</div>
        <div class="col-xs-2">a</div>
        <div class="col-xs-2">b</div>
        <div class="col-xs-2">c</div>
        <div class="col-xs-2">d</div>
    </div>
    <div class="row">
        <div class="col-xs-2">textB</div>
        <div class="col-xs-2">a</div>
        <div class="col-xs-2">b</div>
        <div class="col-xs-2">c</div>
        <div class="col-xs-2">d</div>
    </div>
</div>

See http://jsfiddle.net/bbankes/ELamR/

Answer 2

http://jsfiddle.net/ptwL7

HTML

<table class="kenos-table">

    <th colspan="4">You could have a header if you wanted</th>

    <tr>
        <td>text 1</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 2</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 3</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

    <tr>
        <td>text 4</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>

</table>

CSS

.kenos-table {
    width: 100%;
    max-width: 40em;
    border: 1px solid orange;
    border-collapse: collapse; /* key - remove me to see */   
}

.kenos-table th {
    display: none;
}

.kenos-table tr {
    /* - */
}

.kenos-table td {
    width: 20%;
    border: 1px solid gray;
}