CODEWITHSUNDEEP
cssbootstrap-5
user13400548
user13400548

Reputation:

Why doesn't it open when I click on my tabs?

I only can see the tab which is I made active by default. But when I click on other tabs, I can't see anything. They just won't open. What's my mistake here? Need your help. I tried to find the solution on bootstrap documentation, but I didnt come across with something like this. By the way I am just learning bootstrap. But it's like I am just copying and pasting, is this wrong? How should I learn this? It seems a bit harder than just css. Cause there are many classes that are written by default.. I don't want to memorize. So is it good that I copy and paste when I need?

body .container-fluid {
    padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
    text-align: center;
}
.title-image {
    width:100%;
}

.download-button {
    margin: 15px 13px;
}

.big-heading {
    font-family:  "Montserrat", "sans-serif";
    font-weight: bold;
    font-size: 2.2rem;
    line-height:1.5;
    margin-top: 70px;
}

.first_part {
    color: white;
    background-color: #F27E48;
    text-align: left;
}

.container-fluid {
    padding: 3% 3% 6% 5% !important;
}

.navbar-brand {
    font-family: 'Ubuntu', sans-serif;
    
}

#courses {
    padding:50px 100px 50px;
    background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
    width:60%;
    margin: 18px auto 24px;
}
.card-body p{
    text-align: left;
}

#how {
    padding:50px 70px 50px;
    background-color: rgb(243, 243, 178);
}
#how img {
    height:280px;
    width:330px;
}
.row div {
    margin-top:10px;
}

.outcome {
    width:70%;
    margin:20px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Science Course Web Page</title>
    <link rel="stylesheet" href="styles.css">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


</head>
<body>
    <section class="first_part" >
        <div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
            <nav class="navbar navbar-expand-lg navbar-light">        
                <a class="navbar-brand" href="#">
                    <i class="fab fa-python"> Python Bootcamp</i>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#courses">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#how">How We Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#outcomes">Outcomes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>                 
                    </ul>
                </div>
            </nav>

            <!-- Title -->
            <div class="row">
                <div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
                    <h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
                    <button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
                    <button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>                    

                </div>

                <div class="col-lg-6">
                    <img class="title-image" src="image.jpg" alt="classroom-image">
                </div>

            </div>
        </div>            
    </section>

    <!-- Courses -->
    <section id="courses">
        <h2>Our Course Options</h2>
        <p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>

        <div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
            <div class="col-lg-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <h3>Online Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>100$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>5 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>Must be finished in 6 months</p>
                        <button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="card">
                    <div class="card-header">
                        <h3>Full Time Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>250$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>20 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>2 months</p>
                        <button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h3>Part Time Program</h3>
                    </div>
                    <div class="card-body">
                        <h4>175$ / mo</h4>
                        <p>Unlimited watch time for the saved videos</p>
                        <p>10 mins talking to the instructor per day on skype</p>
                        <p>Unlimited limit of asking questions on the app</p>
                        <p>4 months</p>
                        <button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How we work -->
    <section id="how">
        <h2>How We Work</h2>
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <p>One-on-one mentorship and guidance.</p>
                <img src="coding.jpg" alt="coding-image">
            </div>

            <div class="col-lg-4 col-sm-6">
                <p>Study schedules that fit with your life.</p>
                <img src="clock.jpg" alt="coding-image">
            </div>
            <div class="col-lg-4">
                <p>In-person meetups, workshops.</p>
                <img src="meetup.jpg" alt="meetup-image">
            </div>
        </div>
    </section>

    <!-- Outcomes -->
    <section id="outcomes">
        <div class="outcome">

            <!-- Tabs navs -->
            <ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
                <li class="nav-item" role="presentation">
                <a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
                
                </li>
    
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
                   
                    </li>
                </li>
    
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
                     
                </li>
            </ul>

            <!-- Tabs Content-->
            <div class="tab-content" id="ex2-content">
                <div
                  class="tab-pane fade show active"
                  id="ex3-tabs-1"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-1"
                >
                    <p>$70,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>80%</p>
                    <p>Employed in-field within 90 days of graduation.</p>
                </div>

                <div
                  class="tab-pane fade"
                  id="ex3-tabs-2"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-2"
                >
                    <p>$60,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>75%</p>
                    <p>Employed in-field within 110 days of graduation.</p>
                </div>
                <div
                  class="tab-pane fade"
                  id="ex3-tabs-3"
                  role="tabpanel"
                  aria-labelledby="ex3-tab-3"
                >
                    <p>$40,000</p>
                    <p>Median pay rate graduates reported earning.</p>
                    <p>65%</p>
                    <p>Employed in-field within 150 days of graduation.</p>  
                </div> 
            </div>   
        </div>     
    </section>
    
</body>
</html>

Upvotes: 0

Views: 1114

Answers (2)

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

You have not added the javascript to do so.

Add this javascript to your code.

var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl);

  triggerEl.addEventListener("click", function (event) {
    event.preventDefault();
    tabTrigger.show();
  });
});

Documentation: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

Codepen: https://codepen.io/manaskhandelwal1/pen/eYdLYdN

The script tag for bootstrap javascript should be added after the body tag and not in the head tag, sometimes this will also create problems. And you don't have to learn any bootstrap classes, gradually you will learn them automatically. If you want any other help comment it here I will help you as soon as possible 😃.

Upvotes: 0

Andrew Halpern
Andrew Halpern

Reputation: 514

Example in Bootstrap5 docs says to use: data-bs-toggle, you have data-mdb-toggle. That should fix it for all your nav-links.

<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>

https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav

Upvotes: 1

Related Questions