I am learning Bootstrap. The structure is a container within some context. At the bottom of the container, I put a button next to an description.
Now, I want to set the button align to the right without break the bootstrap structure. What should I do? I had set the "float:right" to the button style, but it appeared bad. The button is outside the "alert-info" background and not vertical align. Any better method?
<div class="alert alert-info">
<a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>
<button type="button" class="btn btn-primary btn-lg" style="float:right;">Large button</button>
</div>
This question is related to
css
twitter-bootstrap
This work for me in bootstrap 4:
<div class="alert alert-info">
<a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>
<button type="button" class="btn btn-primary btn-lg float-right">Large button</button>
</div>
<div class="container">
<div class="btn-block pull-right">
<a href="#" class="btn btn-primary pull-right">Search</a>
<a href="#" class="btn btn-primary pull-right">Apple</a>
<a href="#" class="btn btn-primary pull-right">Sony</a>
</div>
</div>
function Continue({show, onContinue}) {
return(<div className="row continue">
{ show ? <div className="col-11">
<button class="btn btn-primary btn-lg float-right" onClick= {onContinue}>Continue</button>
</div>
: null }
</div>);
}
This worked for me:
<div class="text-right">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
Try this:
<div class="row">
<div class="alert alert-info" style="min-height:100px;">
<div class="col-xs-9">
<a href="#" class="alert-link">Summary:Its some
description.......testtesttest</a>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
</div>
</div>
Demo:
Source: Stackoverflow.com