Difference between revisions of "Bootstrap Infobox"

Revision as of 11:48, 11 May 2026

alert-danger: Indicates a dangerous or potentially negative action, typically displayed in red.

alert-info: Indicates a neutral, informative message, often displayed in blue.

 <div class="alert alert-info" role="alert">Informational alert</div> 

{{Infobox|content=
I should be in a blue alert-info box.
}}

I should be in a blue Info box.

alert-success: Indicates a successful or positive action, typically displayed in green.

 <div class="alert alert-success" role="alert">Success alert</div> 

{{SuccessBox|content=
I should be in a blue alert-success box.
}}

I should be in a green Success box.

alert-warning: Indicates a warning that requires attention, typically displayed in yellow.

 <div class="alert alert-warning" role="alert">Warning alert</div> 

{{WarningBox|content=
I should be in a yellow alert-warning box.
}}

I should be in a yellow Warning box.

Warning Alert

Danger Alert

Success Alert

@@ Line 1: / Line 1: @@
-*
-*alert-warning: Indicates a warning that requires attention, typically displayed in yellow.
 *alert-danger: Indicates a dangerous or potentially negative action, typically displayed in red.
 ===InfoBox===
@@ Line 22: / Line 21: @@
 </pre>
 {{SuccessBox|content=
-I should be in a blue Success box.
+I should be in a green Success box.
+}}
+===WarningBox===
+alert-warning: Indicates a warning that requires attention, typically displayed in yellow.
+<pre> <div class="alert alert-warning" role="alert">Warning alert</div>
+{{WarningBox|content=
+I should be in a yellow alert-warning box.
+}}
+</pre>
+{{warningBox|content=
+I should be in a yellow Warning box.
 }}
 <div class="alert alert-warning" role="alert">Warning Alert</div>