Keshav Vasudevan Keshav Vasudevan - 11 months ago 58
HTML Question

Change the font-size of a <p> element inside Jumbotron

I have a jumbotron, which has a placeholder on top to handle errors on the page. The error has a

tag with its own class, and I want to modify the size of the element. However, the in-built paragraph styles of the jumbotron (Bootstrap) seem to override whatever I've set. I don't want to change the global
size, just of this particular element.


<div class='jumbotron'>

<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span>
<p class = "error-message"> Sign-Up Error </p>



#landing-page-error {
width: 100%;
position: absolute;
top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
height: 10%;

.error-message {
font-size: 10px;

It's a Rails app, and here's a screenshot of the CSS inside the browser -

enter image description here

Please help me set the size of the
tag specifically for the error element. Thank you in advance.

Answer Source
.jumbotron .error-message {
    font-size: 14px;


if this doesn't work, then try this:

.jumbotron p.error-message {
        font-size: 14px;

it will effect all the error-messages inside jumbotron without affecting other <p> tags inside your page.