How do I create a space between Bootstrap buttons and table

I've only just learnt Bootstrap. I'm to keep my code clean and simple, and would like to keep to best practices. I'm trying to create a space between the buttons and the table, because at the moment the buttons are right up against the top of the table and it doesn't look good. I've tried using mb1 and pb1 but nothings working.

<!-- Show Expenses Card -->
<div class="card mt-4">
    <div class="card-header">
    Expense {{id}}
    </div>
    <div class="card-body">

        {% if not data_integrity %}
            <div class="alert alert-danger" role="alert">
                This expense has data Integrity issues!
            </div>
        {% endif %}

        <div class='mb2'><!-- mb2 is for spacing and isn't work. Pls fix. -->
            <a class="btn btn-primary" href="#" role="button">Update</a>
            <a class="btn btn-primary" href="#" role="button">Delete</a>
        </div>

        <table class="table mt2"><!-- mt2 is for spacing and isn't work. Pls fix. -->
            <tbody>
                <tr>
                    <th scope="row">Date</th>
                    <td>{{journal_entry.date}}</td>
                </tr>
                <tr>
                    <th scope="row">Account</th>
                    <td>{{ journal_entry.lineitem_set.all.1.ledger }}</td>
                </tr>
                <tr>
                    <th scope="row">Expense</th>
                    <td>{{ journal_entry.lineitem_set.all.0.ledger }}</td>
                </tr>
                <tr>
                    <th scope="row">Project</th>
                    <td>{{ journal_entry.lineitem_set.all.0.project }}</td>
                </tr>
                <tr>
                    <th scope="row">Store</th>
                    <td>{{ journal_entry.lineitem_set.all.1.description }}</td>
                </tr>
                <tr>
                    <th scope="row">Description</th>
                    <td>{{ journal_entry.lineitem_set.all.0.description }}</td>
                </tr>
                <tr>
                    <th scope="row">Amount</th>
                    <td>{{ journal_entry.lineitem_set.all.0.dr }}</td>
                </tr>
                <tr>
                    <th scope="row">Created by</th>
                    <td>{{ journal_entry.user }}</td>
                </tr>
                <tr>
                    <th scope="row">Data Integrity</th>
                    <td>{{ data_integrity }}</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

The class you want is "mb-2", not "mb2". See this bootstap guide https://getbootstrap.com/docs/4.4/utilities/spacing/

Spacing � Bootstrap, Bootstrap includes a wide range of shorthand responsive margin and padding utility Reboot � Typography � Code � Images � Tables � Figures Assign responsive-friendly margin or padding values to an element or a subset of its sides with (You can add more sizes by adding entries to the $spacers Sass map variable.)� Space between buttons with bootstrap class. 413. March 28, 2017, at 3:57 PM. I would like to have some space between those buttons. Is it possible to do this

First solution would be to add margin to some of them, Update - right margin, or Delete - left margin. For example:

<a class="btn btn-primary mr-4" href="#" role="button">Update</a>

Many other solutions are available, including inserting the additional element, abusing &nbsp and etc.

Button group � Bootstrap, Reboot � Typography � Code � Images � Tables � Figures Use utility classes as needed to space out groups, buttons, and more. 1 </div> </div> <div class="btn -toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups"> Make a set of buttons appear vertically stacked rather than horizontally. Bootstrap Add Space Between Rows | Margin Example. For Bootstrap version > 4 you can use the spacer class mt-n, where n can be 1 or 2. Here is simple example-

You are missing the - in the class name - mb-2. And in general magrins are the way to go, mb-1 is a very small margin (assuming you didn't change any default bootstrap variables). To see changes I would go with bigger values in order to be able to identify them on the page, something like mb-3 or mb-5.

Buttons � Bootstrap, Use Bootstrap's custom button styles for actions in forms, dialogs, and more with Reboot � Typography � Code � Images � Tables � Figures In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button. Create block level buttons—those that span the full width of a parent—by adding .btn- block . You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1 set the margin or padding to $spacer *.25.

Bootstrap Button Groups, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Bootstrap Basic Table. A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table:

How to: add vertical space between stacked "col" elements : bootstrap, We would like to have a bit of vertical space between the col elements for the small screen <div class="row"> <div class="col-md-6"> <button class="btn btn- block Bootstrap 5 Tutorial: How to Create a Simple Web Page Using Bootstrap 5. A specified length that will set the gap between the columns: Play it » normal: Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em: Play it » initial: Sets this property to its default value. Read about initial: Play it » inherit: Inherits this property from its parent element. Read about inherit

How to create more space between a button and text box in HTML or , The best way to add space between two HTML elements is to add either padding or a margin in CSS. padding will add space to the outside of an element and� Button classes Base buttons and their colours. Bootstrap includes nine base button styles, each of them serving its own semantic purpose. The buttons have a white-coloured text and a background based on the btn-[colour] class that's used along with the btn class.

Comments
  • There are different techniques. Simply add a div element with some points height like <div style="height: 10px"></div>.