How can I make Bootstrap components align right?

debugcn Published at Dev

maxwellhertz

I have a responsive table and a button, now I want to make them align right so I do this:

<div class="container-fluid" id="main">
    <button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
    </br>
    <div class="table-responsive">
        <table class="table table-striped">
             <!-- table -->
        </table>
    </div>
</div>

I add pull-right to the button and the page looks like this: How can I make the button and table align right properly?

Gregor Ojstersek

As you can see from the example pull-right class should be working. You might have some problem with padding-right on the parent div of the table, or maybe some col-sm-11 class?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid" id="main">
    </br></br>
    <button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
    </br></br>
    <div class="table-responsive">
        <table class="table table-striped">
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
             <tr>
               <td>1</td><td>2</td><td>3</td>
             </tr>
        </table>
    </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.