Keshav Vasudevan Keshav Vasudevan - 2 months ago 15
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

<p>
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
<p>
size, just of this particular element.

HTML:

<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>

</div>


CSS:

#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
<p>
tag specifically for the error element. Thank you in advance.

Answer
.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.

Comments