How Can I Make Buttons Align Horizontally-Twitter bootstrap

TrashKidStudios
June 18, 2020
59 views
0 votes
2 Answers

I have tried to align the code (linked) to make buttons align horizantlly vs stacked. Any advice? New this working with CSS/Bootstrap this in-depth.
http://jsfiddle.net/kuedrgoL/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="listmenu">
    <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p></div>
    </div>
    <div class="mini-layout fluid">
     <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
    </div>
    </div>
    <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
    <p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
    </div>
    </div>

Answers

You have a lot of ways to make this horizantlly
First way

#listmenu{
display:flex;
}

The second way if you using Bootstrap

<div class="container">
<div class="row">
  <div class="col-sm">
    <div class="mini-layout fluid">
     <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm btn-block" href="index.cfm">Program Home</a></p> 
      </div>
     </div>
    </div>

    <div class="col-sm">
     <div class="mini-layout fluid">
       <div class="mini-layout-sidebar2">
       <p><a class="btn btn-primary btn-sm btn-block" href="Courses.cfm">Course Descriptions</a></p>
        </div>
      </div>
      </div>

      <div class="col-sm">
        <div class="mini-layout fluid">
         <div class="mini-layout-sidebar2">
         <p><a class="btn btn-primary btn-sm btn-block" href="Optional.cfm">Optional Learning</a></p>
         </div>
       </div>
     </div>
   </div>
</div>

The last way you can read this
https://getbootstrap.com/docs/4.0/utilities/flex/

You can achieve this by using a flex layout with the Bootstrap utility classes. Note the addition of classes to #listmenu and the removal of the btn-block classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="listmenu" class="d-flex justify-content-start align-items-center">
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm mr-2" href="index.cfm">Program Home</a></p>
    </div>
  </div>
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm mr-2" href="Courses.cfm">Course Descriptions</a></p>
    </div>
  </div>
  <div class="mini-layout fluid">
    <div class="mini-layout-sidebar2">
      <p><a class="btn btn-primary btn-sm" href="Optional.cfm">Optional Learning</a></p>
    </div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.