Twitter Bootstrap Question posted in

position buttons across a div using justify-content-Twitter bootstrap

i am trying to use justify-content to put one button at the beginning of a div and another button at the end,

but i noticed that justify content is only working if called on the div not the btn itself, so below is what i have written which i know does not work.

any tips would be highly appreciated

<!DOCTYPE html>


    <script  src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>



<title>Container justify</title>


    <div class="d-flex justify-content">
        <button class="btn justify-content-start btn-default">button1</button>


        <button class="btn justify-content-end btn-default">button2</button>    

    </div>

Tags:

2

Answers


  1. 0

    You can do this in a more used manned using inline-block elements as follows:

    .d-flex {
  display: inline-block;
  width: 100%;
}

.justify-content-start {
  float: left;
}

.justify-content-end {
    float: right;
}

    You can change the classes in you html page if needed, I just used the ones you had provided.

    Login or Signup to reply.
  2. 0

    You need to use the correct classes on the parent, in this cae .justify-content-between.

    Bootstrap 4 Layout Utiltites

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between">
  <button class="btn btn-default">button1</button>


  <button class="btn btn-default">button2</button>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search