How to make pull right display properly?

Tags: css,angularjs,twitter-bootstrap,pug

Problem :

This is my current code

 .tag-container.bottom-border.col-middle
    h1.text-center {{ tag.name }}
    button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow

I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?

Thanks.

Update

This is the simplified code about basic html

<row>
  <div>
    <h1> Tag name</h1>
  </div>

  <div class="pull-right">
    <button>Follow</button>
  </div>
 </row>

Feel free to work on it. Thanks

---

Solution :

If you want to stick to pure bootstrap styles, something like this would work:

<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <h1 class="text-center">Tag name</h1>
  </div>

  <div class="col-md-1 text-center">
    <button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
  </div>
</div>

You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).

Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.