Category: Front End / UI

Posted on

CSS Unit: REM

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.
Source: W3School

rem is a CSS unit that is relative to the font-size of the root element.

0.25rem is 4px
0.50rem is 8px
0.75rem is 12px
1rem is 16px

Here’s a helpful chrome extension to help you convert px to rem called PxtoRem: https://chrome.google.com/webstore/detail/pxtorem/ldbemkmafmibhpncgagpegmhbhpolnlp?hl=en

Posted on

Bootstrap PopOver Hacks

Here’s how you can add an HTML code on a data-content of a Bootstrap popover. On the example below, we’re going to add a link on our popover.

Below is a typical Bootstrap popover code.

HTML

<a href="#" role="button" class="popover" data-toggle="popover" title="" data-content="Sample Content <a href='http://winnieverzosa.com' title='sample link'>LINK</a>" data-original-title="Sample Title">Click me</a>

All you need to do is to pass an object to the popover function with a property HTML and set it to true.

JavaScript

<script>
$("[data-toggle=popover]").popover({html:true})
</script>

And that is it! You should be able to add any HTML code on your data-content.

Here’s you can manipulate the size of your popover.

You can just simply pass an object to the popover function with a property container and assign ‘body’ to it.

JavaScript

<script>
$("[data-toggle=popover]").popover({container: 'body'})
</script>

CSS

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Let’s put these together and here’s how you can use it.

HTML

<a href="#" role="button" class="popover" data-toggle="popover" title="" data-content="Sample Content <a href='http://winnieverzosa.com' title='sample link'>LINK</a>" data-original-title="Sample Title">Click me</a>

JavaScript

<script>
$("[data-toggle=popover]").popover({html:true, container: 'body'})
</script>

CSS

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Run snippet here -> https://www.bootply.com/winnieverzosa/7OYbHIuCUw