title: how to make bootstrap 4 carousel responsive?
body: <p>My carousel isn't responsive? When I narrow the page, all of the page is responsive, but the carousel images stay the same size. I'm confused what to change/fix to adjust this, can someone please look at my code and see where the problem is? I took the exact code from getbootstrap, so I'm not sure why this issue is happening. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Cars&lt;/title&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
       &lt;link rel="stylesheet" href="animate.css"&gt;
       &lt;link rel="stylesheet" href="custom.css"&gt;
       &lt;link rel="stylesheet" href="icon.css"&gt;
       &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;header&gt;
            &lt;nav class="navbar navbar-expand-sm navbar-dark"&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;Cars&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" 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="navbarsExample03"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="index.html"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Sports Cars&lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="dropdown03"&gt;
                &lt;a class="dropdown-item" href="s2000.html"&gt;Honda S2000&lt;/a&gt;
                &lt;a class="dropdown-item" href="m3.html"&gt;BMW M3&lt;/a&gt;
                &lt;a class="dropdown-item" href="corvette.html"&gt;Chevrolet Corvette&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown"&gt;
              &lt;a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Exotic Cars&lt;/a&gt;
              &lt;div class="dropdown-menu" aria-labelledby="dropdown03"&gt;
                &lt;a class="dropdown-item" href="agera.html"&gt;Koenigsegg Agera&lt;/a&gt;
                &lt;a class="dropdown-item" href="nsx.html"&gt;Acura NSX&lt;/a&gt;
                &lt;a class="dropdown-item" href="ford.html"&gt;Ford GT&lt;/a&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form class="form-inline my-2 my-md-0"&gt;
            &lt;input class="form-control" type="text" placeholder="Search"&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
        &lt;/header&gt;
  
            &lt;main role="main"&gt;
  
        &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
          &lt;ol class="carousel-indicators"&gt;
            &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
            &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
            &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="carousel-item active"&gt;
              &lt;img class="first-slide" src="nsx.jpg" alt="Red NSX"&gt;
              &lt;div class="container"&gt;
                &lt;div class="carousel-caption text-left"&gt;
                  &lt;p&gt;&lt;a class="btn btn-lg btn-primary animated rubberBand" href="nsx.html" role="button"&gt;NSX &lt;span class="icon-speedometer"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                  &lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"&gt; More info!&lt;/button&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img class="second-slide" src="gt.jpg" alt="Gray Ford GT"&gt;
              &lt;div class="container"&gt;
                &lt;div class="carousel-caption"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img class="third-slide" src="lambo.jpg" alt="Red Lamborghini"&gt;
              &lt;div class="container"&gt;
                &lt;div class="carousel-caption text-right"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"&gt;
            &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"&gt;
            &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="container marketing"&gt;
  
        &lt;br&gt; &lt;br&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="s2k.jpg" alt="Yellow S2000" width="140" height="140"&gt;
              &lt;h3&gt;S2000&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: Honda&lt;/li&gt;
                &lt;li&gt;Production: 2000-2009&lt;/li&gt;
                &lt;li&gt;Engine Size: 4 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;
              &lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="s2000.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="m3.jpg" alt="Silver M3" width="140" height="140"&gt;
              &lt;h3&gt;M3&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: BMW&lt;/li&gt;
                &lt;li&gt;Production: 1985-Present&lt;/li&gt;
                &lt;li&gt;Engine Size: 6-8 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="m3.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="nsx.jpg" alt="red nsx" width="140" height="140"&gt;
              &lt;h3&gt;NSX&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: Acura&lt;/li&gt;
                &lt;li&gt;Production: 1990-Present&lt;/li&gt;
                &lt;li&gt;Engine Size: 6 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="nsx.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="corvette.jpg" alt="Black Corvette" width="140" height="140"&gt;
              &lt;h3&gt;Corvette&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: Chevrolet&lt;/li&gt;
                &lt;li&gt;Production: 1953-Present&lt;/li&gt;
                &lt;li&gt;Engine Size: 8 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="corvette.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="gt.jpg" alt="Gray ford GT" width="140" height="140"&gt;
              &lt;h3&gt;Ford GT&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: Ford&lt;/li&gt;
                &lt;li&gt;Production: 2004-Present&lt;/li&gt;
                &lt;li&gt;Engine Size: 8 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="ford.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
            &lt;div class="col-lg-4"&gt;
              &lt;img class="rounded-circle" src="agera.jpg" alt="blue agera" width="140" height="140"&gt;
              &lt;h3&gt;Agera&lt;/h3&gt;
              &lt;p&gt;&lt;ul&gt;
                &lt;li&gt;Manufacture: Koenigsegg&lt;/li&gt;
                &lt;li&gt;Production: 2011-Present&lt;/li&gt;
                &lt;li&gt;Engine Size: 8 Cylinder&lt;/li&gt;
                &lt;li&gt;Drivetrain: Rear Wheel Drive&lt;/li&gt;
              &lt;/ul&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a class="btn btn-secondary" href="agera.html" role="button"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;&lt;!-- /.col-lg-4 --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
  
  
  
        &lt;!-- FOOTER --&gt;
        &lt;footer class="container"&gt;
          &lt;p&gt;&lt;button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;
          Contact us &lt;span class="icon-phone"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/p&gt;
        &lt;div class="collapse" id="collapseExample"&gt;
         &lt;div class="card card-body"&gt;
          Email:Umar@qurashi.com
         &lt;/div&gt;
        &lt;/div&gt;
          &lt;p class="float-right"&gt;&lt;a href="index.html"&gt;Back to top&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&amp;copy; 2017 Umar Qurashi&lt;/p&gt;
        &lt;/footer&gt;
  
      &lt;/main&gt;
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>