Bootstrap 3 callouts missing in Yii 2 application

Question

I've added an example code for displaying Bootstrap 3's callout to my Yii2-powered application:

<div class="bs-callout bs-callout-info">
    <h4>Use protocol</h4>
    Avoid links without <code>http://www.</code> or <code>https://www.</code> in the beginning.
</div>

And I can't see proper styling.

What am I missing. Bootstrap on board Yii2 is to old and doesn't have these styles? Or maybe I forgot to push the magic button somewhere?

Answer 1

Callouts are used in their docs, but it's not included in main CSS. Yii 2 ships with the newest version of Bootstrap (at the current moment 3.3.4), so this is not the reason.

You have to write proper CSS styles by yourself. According to this article you need to add this:

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}

anywhere into your CSS styles.

Then you can use callouts like that:

<div class="bs-callout bs-callout-success">
  <h4>Success Callout</h4>
  This is a success callout.
</div>