Is there some way to display alert boxes on google colab? - html

Question

To display nice boxes on Jupyter Notebooks, it is possible to use alert HTML tags and put inside some markdown content.
Here an example displayed on a Jupyter Lab instance :
<div class="alert alert-info" role="alert" style="color: rgba(0,0,0,.8); background-color: white; margin-top: 1em; margin-bottom: 1em; margin:1.5625emauto; padding:0 .6rem .8rem!important;overflow:hidden; page-break-inside:avoid; border-radius:.25rem; box-shadow:0 .2rem .5rem rgba(0,0,0,.05),0 0 .05rem rgba(0,0,0,.1); transition:color .25s,background-color .25s,border-color .25s ; border-right: 1px solid #dee2e6 ; border-top: 1px solid #dee2e6 ; border-bottom: 1px solid #dee2e6 ; border-left:.2rem solid #007bff80;">
<h3 class="alert-heading"><i class="fa fa-comment"></i> Note</h3>
An example of a nicely formatted box
</div>
This can even be simplified to basic alerts :
<div class="alert alert-info" role="alert">
<h3 class="alert-heading">Note</h3>
An example of a nicely formatted box
</div>
However, the same notebook does not render well on Google Colab:
Example notebook here

Answer 1

Maybe make your own classes. following code works both in collab and jupyter
You can use the HTML magic command to display the HTML code directly
from IPython.core.display import HTML
HTML("""
<div class="alert">
<p>This is an alert box.</p>
</div>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
margin-bottom: 15px;
}
</style>
""")

Answer 2

It's highly probably that classes alert-* are pre-defined in Jupyter Notebook, but not in Google Colab. I see a simple solution — just define these classes yourself, maybe like this:
.alert {
border-radius: 10px;
background-color: #bbb;
border: 2px solid #999;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Arial', sans-serif;
}
.alert > h3 {
display: block;
font-size: 30px;
margin-top: 5px;
margin-bottom: 15px;
}
.alert-info {
background-color: #1af !important;
border: 2px solid #04a !important;
}
<div role="alert" class="alert alert-info">
<h3>Note</h3>
An example of a nicely formatted box
</div>
Or maybe change the colors (1af etc.).
If you need a better box than the one that appears if you run the above snippet, you may use the style from your first example of a nice box.
UPDATE: a box using your style.
.alert {
border-radius: 10px;
background-color: #bbb;
border: 2px solid #999;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Arial', sans-serif;
}
.alert > h3 {
display: block;
font-size: 30px;
margin-top: 5px;
margin-bottom: 15px;
}
.alert-info-stylish {
color: rgba(0,0,0,.8) !important;
background-color: white !important;
margin-top: 1em !important;
margin-bottom: 1em !important;
margin: 1.5625emauto !important;
padding: 0 .6rem .8rem !important;
overflow: hidden !important;
page-break-inside: avoid !important;
border-radius: .25rem !important;
box-shadow:0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1) !important;
transition: color .25s, background-color .25s, border-color .25s !important;
border-right: 1px solid #dee2e6 !important;
border-top: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;
border-left:.2rem solid #007bff80 !important;
}
<div role="alert" class="alert alert-info-stylish">
<h3>Note</h3>
An example of a nicely formatted box
</div>

Answer 3

Maybe as an idea, run it as snipped as a python code block:
##title Alert Notification
from IPython.display import HTML
alert_info = '''
<div class="alert alert-info" role="alert">
<h3 class="alert-heading">Note</h3>
An example of a nicely formatted box
</div>
'''
display(HTML('<link href="https://nbviewer.org/static/build/styles.css" rel="stylesheet">'))
display(HTML(alert_info))
Text cells are formatted using a markdown language version which is also uses at GitHub. The support for this feature on GitHub is still being discussed.
I use the UTF-8 icons combined with a quote block:
> # 🗒 Info
> This is a note.
> # ⚠ Warning
> This is a warning.
> # ⛔ Alert
> This is an alert.