Artificial Intelligence Question posted in
ChatGBT is becoming a world-wide phenomena, try it out here.

How to put spaces betwwen buttons horizontally using css? – Artificial Intelligence

enter image description hereWhen buttons shift to second line, they are attached to eachother and not looking good, i want to put space between buttons horizontally.

      <div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="top"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="left"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on left">
        Data Science
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="bottom"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on bottom">
        FInance
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Human Resource
    </button>
    &nbsp;
    

      </div>
Tags:

4

Answers


  1. 0

    One solution is to simply put a <br> element between the buttons.

    Another solution would be to put a horizontal margin between buttons. If you are using Bootstrap, the class my-3 might be useful to achieve this.

    For more info about margin on Bootstrap, here is the official guide: https://getbootstrap.com/docs/4.5/utilities/spacing/

    Login or Signup to reply.
  2. 0

    just add padding using

    style=padding-left:3%

    put this inside the button you want to move left

    EDIT:

    you are using bootstrap so add m-3 to every button to every button on the page so they are spaced out on all sides.

    Login or Signup to reply.
  3. 0

    ok so if this is the first row of buttons then do this:

    <div class="mb-3"> <!-- NEW DIV HERE -->
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="top"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="left"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on left">
        Data Science
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="bottom"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on bottom">
        FInance
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Human Resource
    </button>
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Ennginering
    </button>
</div> <!-- END DIV HERE -->

<!-- NEXT ROW OF BUTTONS -->
    Login or Signup to reply.
  4. 0

    To each button add mb-3 class (as stated in previous comments) and I would also add mr-3 class (or mr-2) instead of the &nbsp; (it’s just nicer practice and usage of bootstrap).

    like this:

    <div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="right" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="top" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    
    ...
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search