CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
maxwellhertz
maxwellhertz

Reputation: 483

How can I make Bootstrap components align right?

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: enter image description here How can I make the button and table align right properly?

Upvotes: 0

Views: 56

Answers (3)

CodeZombie
CodeZombie

Reputation: 2087

By default,td items aligned to left so override it.

#main table tr td:last-child{
        text-align: right !important;
    }

Upvotes: 0

Gregor Ojstersek
Gregor Ojstersek

Reputation: 1379

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>

Upvotes: 3

Prashant Singh
Prashant Singh

Reputation: 45

use col-sm-offset.

<div class="container-fluid col-sm-offset-2" 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>

Upvotes: 0

Related Questions