CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shoplifter20
Shoplifter20

Reputation: 161

How to position bootstrap buttons where I want?

Inside this code

<div class="content">
    <h1>TraceMySteps</h1>
       <div>
            <div range-slider
                 floor="0"
                 ceiling="19"
                 dragstop="true"
                 ng-model-low="lowerValue"
                 ng-model-high="upperValue"></div>
        </div>
    <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

I have my bootstrap button created. The problem here is that it is positioned on the bottom left of my div. I want to put it on the top-right/center of the div, aligned with my title (h1). How do I position it where I want it? I'm new to bootstrap so I do not know about these workarounds. Thank you.

Upvotes: 6

Views: 61546

Answers (2)

Sasmitha Dasanayaka
Sasmitha Dasanayaka

Reputation: 81

Making the bootstrap-button inside a div tag you can create the bootstrap button inside a div and use align.

Example:

<div style="width:350px;" align="center">
    <button type="button" class="btn btn-primary" >edit profile picture</button>
</div>

Upvotes: 5

Marcelo
Marcelo

Reputation: 4425

You can use bootstrap's classes to do this.

You can add pull-right class to float the button to the right.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
</div>

Live example here.

As per your comments, for more precise control you can do this with absolute positioning instead.

You give the content element relative positioning and give the button absolute positioning. You can then use any combination of the top, right, bottom, and left properties to place it where you would like.

.content {
  position: relative;
}
#right-panel-link {
  position: absolute;
  top: 0;
  right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
  <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

Live example here.

Upvotes: 7

Related Questions