CODEWITHSUNDEEP
csstwitter-bootstrap
Hive Voltage
Hive Voltage

Reputation: 47

How do I modify certain bootstrap elements?

I am developing a website for my high school's robotics team. I have 2 jumbotron elements but I need to modify one of the jumbotron elements without changing the other. How do I do this?

The site is www.robotichive3774.com

<!DOCTYPE html>
<html>
<head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Robot">Our Robot</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Banner -->
<div class="jumbotron">
    <img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->

<div class="jumbotron">
    <h1>Team 3774 Member Bio</h1>
    <p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Abanoub Boules</h2>
            <p>Team Captain, Engineer, Coder</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Andre Bernardo</h2>
            <p>Head Engineer, Assistant Captain</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Leo Scarano</h2>
            <p>Head Coder, Head Web-master</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Andrew Wojtkowski</h2>
            <p>Coder, Web-master, Engineer</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Mina Hanna</h2>
            <p>Engineer, Coder</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Kenneth Rebbecke</h2>
            <p>Engineer, Documenter</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Kristen Kaldas</h2>
            <p>Coder, Head Documenter</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Melanie Aguilar</h2>
            <p>Secretary, Mascot</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Anish Patel</h2>
            <p>Engineer, Head 3D Modelling</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
        <div class="col-md-4">
            <h2>Furhan Ashraf</h2>
            <p>Financial Advisor, Engineer</p>
            <button type="button" class="btn btn-default">Read More</button>
        </div>
    </div>
</div>


</body>
</html>

I need to have the jumbotron element on the top of the website to contain these elements but I can't have these elements applied to the second jumbotron.

.padding
 {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
}

Upvotes: 0

Views: 92

Answers (1)

Axel
Axel

Reputation: 10772

Add an id selector to the one you wish you single out, such as id="top-jumbotron"

<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
    <img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>

Then apply the CSS using an ID selector, :

#top-jumbotron {
   padding-left:0;
   padding-right:0;
   padding-bottom:0;
}

Keep in mind that an ID must be unique on the page, meaning you can only have one #top-jumbotron, one #bottom-jumbotron etc. They are useful for singling out unique elements that need specific styles or other methods applied to them.

ID selectors are denoted by a hashtag # and must be unique to the page
Example: #top-jumbotron

Class selectors are denoted by a period . and can be applied to one or more elements on the page
Example: .jumbotron

Alternatively, you can single out the first .jumbotron class on the page by using the :first-child pseudo selector like this:

.jumbotron:first-child
 {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
}

However for your case I would recommend using a specific targeted ID so you know it's always being applied to the correct jumbotron.

Upvotes: 2

Related Questions