Clever Geek Handbook

Can the Bootstrap (v3) system system be used inside an alert?

Can I use Bootstrap's grid system inside an alert? I'm trying to put a couple of .btn .btn-block

links side by side by putting them inside a div .col-xs-6

, but they just get out of the warning.

JsFiddle here.

<div class="alert alert-info">
    <p>
        Alert text here.
    </p>
    <div class="col-xs-6">
         <a href="#" class="btn btn-block btn-default">Button A</a>
    </div>
    <div class="col-xs-6">
        <a href="#" class="btn btn-block btn-default">Button B</a>
    </div>
</div>
+3


source to share


2 answers


You need to wrap the classes with a col-*

container .row

:



<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="alert alert-info">
    <p>Alert text here.</p>
    <div class="row">
        <div class="col-xs-6">
            <a href="#" class="btn btn-block btn-default">Button A</a>
        </div>
        <div class="col-xs-6">
            <a href="#" class="btn btn-block btn-default">Button B</a>
        </div>
    </div>
</div>
Run codeHide result


+13


source


Are you looking for something like this: https://jsfiddle.net/bxttfxkw/1/



<div class="alert alert-info">
    <div class="row">
        <p class="col-xs-12">
            Alert text here.
        </p>
        <div class="col-xs-6">
             <a href="#" class="btn btn-block btn-default">Button A</a>
        </div>
        <div class="col-xs-6">
            <a href="#" class="btn btn-block btn-default">Button B</a>
        </div>
    </div>
</div>
+3


source






More articles:


All Articles