title: Why doesn't it open when I click on my tabs?
body: <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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&gt;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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Data Science Course Web Page&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;!-- Font Awesome CDN --&gt;
      &lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/&gt;
  
      &lt;!-- Google Fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat&amp;family=Noto+Serif&amp;family=Ubuntu&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;!-- CSS only --&gt;
      &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"&gt;
  
      &lt;!-- JavaScript Bundle with Popper --&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section class="first_part" &gt;
          &lt;div class="container-fluid"&gt;
  &lt;!--all of element appeared when i wrote navbar-expand-lg--&gt;
              &lt;nav class="navbar navbar-expand-lg navbar-light"&gt;        
                  &lt;a class="navbar-brand" href="#"&gt;
                      &lt;i class="fab fa-python"&gt; Python Bootcamp&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo02"&gt;
                      &lt;ul class="navbar-nav ms-auto"&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#courses"&gt;Courses&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#how"&gt;How We Work&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#outcomes"&gt;Outcomes&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-item"&gt;
                              &lt;a class="nav-link" href="#contact"&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;                 
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  
              &lt;!-- Title --&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6"&gt; &lt;!-- so it will fill 50% of width on screen of laptops, and bigger screens--&gt;
                      &lt;h1 class="big-heading"&gt;Download the best Python bootcamp on your device, and start to study now.&lt;/h1&gt;
                      &lt;button type="button" class="btn btn-lg btn-outline-danger download-button"&gt;&lt;i class="fab fa-apple"&gt;&lt;/i&gt; Download&lt;/button&gt;
                      &lt;button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"&gt;&lt;i class="fab fa-google-play"&gt;&lt;/i&gt; Download&lt;/button&gt;                    
  
                  &lt;/div&gt;
  
                  &lt;div class="col-lg-6"&gt;
                      &lt;img class="title-image" src="image.jpg" alt="classroom-image"&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;            
      &lt;/section&gt;
  
      &lt;!-- Courses --&gt;
      &lt;section id="courses"&gt;
          &lt;h2&gt;Our Course Options&lt;/h2&gt;
          &lt;p&gt;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.&lt;/p&gt;
  
          &lt;div class="row"&gt;
  &lt;!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% --&gt;
              &lt;div class="col-lg-4 col-sm-6"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;
                          &lt;h3&gt;Online Program&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h4&gt;100$ / mo&lt;/h4&gt;
                          &lt;p&gt;Unlimited watch time for the saved videos&lt;/p&gt;
                          &lt;p&gt;5 mins talking to the instructor per day on skype&lt;/p&gt;
                          &lt;p&gt;Unlimited limit of asking questions on the app&lt;/p&gt;
                          &lt;p&gt;Must be finished in 6 months&lt;/p&gt;
                          &lt;button class="btn btn-lg btn-outline-dark col-12"&gt;Sign Up&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-sm-6"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;
                          &lt;h3&gt;Full Time Program&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h4&gt;250$ / mo&lt;/h4&gt;
                          &lt;p&gt;Unlimited watch time for the saved videos&lt;/p&gt;
                          &lt;p&gt;20 mins talking to the instructor per day on skype&lt;/p&gt;
                          &lt;p&gt;Unlimited limit of asking questions on the app&lt;/p&gt;
                          &lt;p&gt;2 months&lt;/p&gt;
                          &lt;button class="btn btn-lg btn-outline-secondary col-12"&gt;Sign Up&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;
                          &lt;h3&gt;Part Time Program&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h4&gt;175$ / mo&lt;/h4&gt;
                          &lt;p&gt;Unlimited watch time for the saved videos&lt;/p&gt;
                          &lt;p&gt;10 mins talking to the instructor per day on skype&lt;/p&gt;
                          &lt;p&gt;Unlimited limit of asking questions on the app&lt;/p&gt;
                          &lt;p&gt;4 months&lt;/p&gt;
                          &lt;button class="btn btn-lg btn-outline-dark col-12"&gt;Sign Up&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;!-- How we work --&gt;
      &lt;section id="how"&gt;
          &lt;h2&gt;How We Work&lt;/h2&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-4 col-sm-6"&gt;
                  &lt;p&gt;One-on-one mentorship and guidance.&lt;/p&gt;
                  &lt;img src="coding.jpg" alt="coding-image"&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-sm-6"&gt;
                  &lt;p&gt;Study schedules that fit with your life.&lt;/p&gt;
                  &lt;img src="clock.jpg" alt="coding-image"&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;p&gt;In-person meetups, workshops.&lt;/p&gt;
                  &lt;img src="meetup.jpg" alt="meetup-image"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;!-- Outcomes --&gt;
      &lt;section id="outcomes"&gt;
          &lt;div class="outcome"&gt;
  
              &lt;!-- Tabs navs --&gt;
              &lt;ul class="nav nav-tabs nav-justified" id="ex1" role="tablist"&gt;
                  &lt;li class="nav-item" role="presentation"&gt;
                  &lt;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"&gt;Full Time Program&lt;/a&gt;
                  
                  &lt;/li&gt;
      
                  &lt;li class="nav-item" role="presentation"&gt;
                      &lt;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"&gt;Part Time Program&lt;/a&gt;
                     
                      &lt;/li&gt;
                  &lt;/li&gt;
      
                  &lt;li class="nav-item" role="presentation"&gt;
                      &lt;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"&gt;Online Program&lt;/a&gt;
                       
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;!-- Tabs Content--&gt;
              &lt;div class="tab-content" id="ex2-content"&gt;
                  &lt;div
                    class="tab-pane fade show active"
                    id="ex3-tabs-1"
                    role="tabpanel"
                    aria-labelledby="ex3-tab-1"
                  &gt;
                      &lt;p&gt;$70,000&lt;/p&gt;
                      &lt;p&gt;Median pay rate graduates reported earning.&lt;/p&gt;
                      &lt;p&gt;80%&lt;/p&gt;
                      &lt;p&gt;Employed in-field within 90 days of graduation.&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div
                    class="tab-pane fade"
                    id="ex3-tabs-2"
                    role="tabpanel"
                    aria-labelledby="ex3-tab-2"
                  &gt;
                      &lt;p&gt;$60,000&lt;/p&gt;
                      &lt;p&gt;Median pay rate graduates reported earning.&lt;/p&gt;
                      &lt;p&gt;75%&lt;/p&gt;
                      &lt;p&gt;Employed in-field within 110 days of graduation.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div
                    class="tab-pane fade"
                    id="ex3-tabs-3"
                    role="tabpanel"
                    aria-labelledby="ex3-tab-3"
                  &gt;
                      &lt;p&gt;$40,000&lt;/p&gt;
                      &lt;p&gt;Median pay rate graduates reported earning.&lt;/p&gt;
                      &lt;p&gt;65%&lt;/p&gt;
                      &lt;p&gt;Employed in-field within 150 days of graduation.&lt;/p&gt;  
                  &lt;/div&gt; 
              &lt;/div&gt;   
          &lt;/div&gt;     
      &lt;/section&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>