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.


    CSS Howto..

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to call am (image) div inside of a list?

    How to display inline with rails?

    How to use particular CSS styles based on screen size / device

    How to create a pure css slideshow? [closed]

    How to override css attribute-only style

    How can my css div with the display flex property be alignd to the right when it's wrapping?

    How to add php to wordpress form

    How to set bold only to first level list elements? [duplicate]

    How to Dynamically create a CSS class using AngularJS

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    How set font-size in TinyMce

    How to align div horizontally in this case

    How to change the border of an element when selected?

    how to give style to the selected option in html

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    how to make background css url dynamic using jquery

    How should I do this in CSS?

    How to have 3 sections in a row

    How to read all numeric values from within a file in php?

    How can I float two tables next to each other left to right and center them both?

    How to get bean property on css file?

    jQuery Show/Hide - CSS display values are affecting my layout

    How to get the perticluar image from large set images in one image using css

    how to make changes permanently to css elements with -moz-transform?

    My Background image doesn't show up and is not inspected in the browser [closed]

    How to change CSS (background-image) from JQuery in Rails?

    How can I make this a horizontal list?

    How to make my first-child in css work properly?

    How can I display links in 2 rows?