How to position bootstrap buttons where I want?

Question

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.

Answer 1

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.

Answer 2

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>