Within the realm of Bootstrap, both p
and div
hold the status of block level elements -- where p
takes on
margin-top: 0; margin-bottom: 1rem;
from _reboot.scss. In cases where the ancestors carry distinct classes and your
div
inherits those styles (e.g., a parent being
<div class="container lead">
), utilizing
<div class="mb-3">BIO</div>
will yield a resemblance close to that of regular
p
elements.
Beyond the constraints of HTML semantics, you have the liberty to adopt
<div class="mb-3">BIO</div>
; however, for better accessibility with screen readers and streamlining appearance inheritance, I suggest sticking to
<div><p>BIO</p></div>
.
Moreover, Bootstrap defines numerous styling attributes at the body level and leverages classes solely to modify essential styles for accomplishing targeted outcomes. The visual aspects of both div
and p
are predetermined at the body level via _reboot.scss:
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}