CODEWITHSUNDEEP
cssbootstrap-4
Syntax Error
Syntax Error

Reputation: 1640

Bootstrap buttons will not move to the right

I have tried using float-right on my buttons as per the Boostrap docs but cannot get 3 of 4 buttons to move over to the right hand side of their containing div. What am I doing wrong?

JSfiddle link

Note that I want the Submit the form button to stay where it is.

The code for those who cannot access the jsfiddle:

<div class="container">
    <div class="row mt-1 px-3">
        <div class="col-lg-12">
            <p>
            div above buttons
            </p>
        </div>
        <div class="col-lg-12">              
            <div class="btn-toolbar">
                <button type="submit" class="btn btn-success mr-1">Submit the form</button>
                <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 float-right">Save Draft</button>
                <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1 float-right" >Restore Draft</button>
                <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 float-right">Delete All Drafts</button>
            </div>
        </div>
    </div>
</div>

I have also tried changing btn-toolbar to btn-group.

Upvotes: 1

Views: 1466

Answers (2)

kashalo
kashalo

Reputation: 3562

you problem because .btn-toolba use display: flex; you can modify that behavior and targeting only this div by adding class and change the display value as below: 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col-lg-12 {
  border: solid 1px #6c757d;
  padding: 10px;
}
 .test.btn-toolbar{
  display: block !important;
}
<head>
  <title>Parag Patel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  

</head>

<body>
<div class="container">
    <div class="row mt-1 px-3">
        <div class="col-lg-12">
            <p>
            div above buttons
            </p>
        </div>
        <div class="col-lg-12">
            <div class="test btn-toolbar ">
                <button type="submit" class="btn btn-primary mr-1">Submit the form</button>
                <button type="button" id="SaveDraft" class="btn   mr-1 float-right">Save Draft</button>
                <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1 float-right" >Restore Draft</button>
                <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 float-right">Delete All Drafts</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Upvotes: 1

Othmane
Othmane

Reputation: 289

You can do something like this:

<div class="container">
<div class="row mt-1 px-3">
    <div class="col-lg-12">
        <p>
        div above buttons
        </p>
    </div>
    <div class="col-lg-12">              
        <div class="btn-toolbar">
            <button type="submit" class="btn btn-success mr-1">Submit the form</button>
          <div style="margin-left: auto;">
            <button type="button" id="SaveDraft" class="btn btn-outline-primary mr-1 ">Save Draft</button>
            <button type="button" id="RestoreDraft" class="btn btn-outline-warning mr-1" >Restore Draft</button>
            <button type="button" id="DeleteDraft" class="btn btn-outline-danger mr-1 ">Delete All Drafts</button>
          </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions