Missing 3 callouts in Yii 2 app

Question

I added sample code to display the Bootstrap 3 callout in 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 do not see the right style.

What am I missing. Is Bootstrap aboard Yii2 old and doesn't have these styles? Or maybe I forgot to press the magic button somewhere?

Answer 1

Callouts are used in their documents, but are not included in the core CSS . Yii 2 comes with the latest version of Bootstrap (currently 3.3.4 ), so this is not the reason.

You must write your own CSS styles yourself. In accordance with this article, you need to add the following:

 .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; } 

somewhere in your CSS styles.

Then you can use callouts like this:

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