Bootstrap 4 - How to create a table, which starts from second column?

Question

I do have this HTML, but I am not able to do this:

• The width of the first column Links available should be same like the length of Links available, and the text shouldn't split this two words. It should be one line Links available
• On the column Links available only header is important, the cells below will not be used, so it could be hidden
• The buttons should have a little bit space between next button, and it should be like inline...

What I want to, in visual:

My HTML:

           
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

           <table class="table">
                  <thead>
                    <tr>
                      <th class="col-xl">Links available:</th>
                      <th class="col-xl-auto">Category 1</th>
                      <th class="col-xl-auto">Category 2</th>
                      <th class="col-xl-auto">Category 3</th>
                    </tr>
                  </thead>
                  <tbody>
                      <tr>
                        <td class="col-xl"></td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                      </tr>
                      <tr>
                        <td class="col-xl"></td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                      </tr>
                       <tr>
                        <td class="col-xl"></td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                        <td class="col-xl-3">
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
                        </td>
                      </tr>
                    </tbody>
                </table>

if you would like to test my code, please use: codeply - Bootstrap snippets

Answer 1

If you want to remove responsiveness column

change

col-md-3

to

col-3

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<table class="table">
    <thead>
        <tr class="">
            <th class="">Links available:</th>
            <th class="">Category 1</th>
            <th class="">Category 2</th>
            <th class="">Category 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class=""></td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
        </tr>
        <tr>
            <td class=""></td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
        </tr>
        <tr>
            <td class=""></td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
            <td class="">
                <div class="row">
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                    <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
                </div>
            </td>
        </tr>
    </tbody>           
</table>

Second code using DIV

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid p-0">
    <div class="row m-0">
        <div class="col-3 p-0">
            <p class="font-weight-bold">Links available:</p>
        </div>
        <div class="col-3 p-0">
            <p class="font-weight-bold">Category 1</p>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
        </div>
        <div class="col-3 p-0">
            <p class="font-weight-bold">Category 2</p>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
        </div>
        <div class="col-3 p-0">
            <p class="font-weight-bold">Category 3</p>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
            <button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
        </div>
    </div>
</div>

Answer 2

I think you are searching for a nested Grid Layout. I recommend to read about this, so you can see examples of how to work with the Bootstrap Grid System. Even more, on XS (EXTRA SMALL) screens sizes I recommend to stack the categories vertically because of the little width you have available. You can check this all on next example:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-sm-3 text-center">
    <p class="my-1">Links available:</p>
  </div>

  <div class="col-sm-3 text-center bg-warning">
    <div class="row">
      <div class="col-12 my-1">Category 1:</div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
    </div>
  </div>

  <div class="col-sm-3 text-center">
    <div class="row">
      <div class="col-12 my-1">Category 2:</div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
    </div>
  </div>

  <div class="col-sm-3 text-center bg-warning">
    <div class="row">
      <div class="col-12 my-1">Category 3:</div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-primary btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-danger btn-block">B</button>
      </div>
      <div class="col-4 my-1">
        <button type="button" class="btn btn-success btn-block">B</button>
      </div>
    </div>
  </div>

</div>
</div>