CODEWITHSUNDEEP
htmltwitter-bootstrap-3
newbie
newbie

Reputation: 145

Bootstrap 3 pull-right button and text

I want to be able to place a text below the button with a pull-right class. I also placed a pull-right class in the paragraph tag of the text.

My HTML code:

<div class="box">
  <button type="submit"class="btn btn-info pull-right">Button</button>
  <p class="pull-right">Text</p>            
</div>

The problem is that the text shows up beside the button, not below. I want the the text on the bottom of the button to be on the right side. How do I go about doing this?

Thanks in advance for the suggestions.

Upvotes: 4

Views: 6589

Answers (3)

skav3n
skav3n

Reputation: 180

You need to clear float. Create class clearClass in style

.clearClass{ clear: both; }

and add new class to paragraph.

Upvotes: 0

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

If you have add pull-right class on the box div if you only want to float right this two elements on box div. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <div class="box pull-right">
  <button type="submit"class="btn btn-info">Button</button>
    <p class="below-btn-txt">Text</p>       
</div>

Upvotes: 0

Daniel Congrove
Daniel Congrove

Reputation: 3679

Putting the <button>...</button> inside of the paragraph and adding a break should do the trick.

Like:

<div class="box">
  <p class="pull-right">
    <button type="submit"class="btn btn-info">Button</button><br />
  Text</p>            
</div>

Upvotes: 3

Related Questions