Bootstrap 4 carousel controls don't appear

bootstrap 4 carousel multiple items
bootstrap 4 carousel card slider
bootstrap carousel not working
bootstrap carousel buttons not working
bootstrap 3.3.7 carousel
bootstrap 4 navbar carousel
how to make carousel responsive in bootstrap 4
bootstrap 4 custom carousel controls

I'm having an issue with the Bootstrap 4 carousel. It's actually working the way it should, except that the previous/next icons will not show. I've looked up/tried the following:

-glyphicons are no longer supported

-tried putting controls inside div "carousel-inner"

-tried applying z-index to controls

-tried changing image sizes and icon colors in CSS

My code looks just like the Bootstrap docs and all the examples I've looked up. Please help! Thanks in advance.

page as it currently appears (obviously not even close to done) https://cdn.rawgit.com/Cookrp924/My-Portfolio/9c48827b/Job%20Portfolio.html

the code in question:

<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-lg-7">
            <h5>I am currently living in Raleigh, NC right next to the Research Triangle Park area. Through several friends and colleagues, I developed an interest in learning how to code and have been expanding my knowledge ever since. My resources include Free Code Camp, Colt Steele's "Web Developer Bootcamp", Codecademy, Stack Overflow and of course Google.</h5>
            <h5>I am currently open to new opportunities. Please contact me at: emailhere.com</h5>
        </div>
        <div class="col-lg-5">
            <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/19990238_1802039519806266_6452049826481461127_n.jpg?oh=5192b5fe6276a7df8be03aa31254cae6&oe=5B367A91" id="aboutmePic">
        </div>
    </div>
</div>


<div class="container">
    <h1>Skills</h1>
    <div class="row">
        <div class="col-lg-12">
            <h3>My skillset currently includes JavaScript, HTML, and CSS. I also utilize frameworks and libraries such as Bootstrap and jQuery. I always strive to create projects that are not only functional but also work reliably and have simple, easy to navigate user interfaces.</h3>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-4">
            <i class="devicon-javascript-plain colored"></i>
            <i class="devicon-html5-plain-wordmark colored"></i>
            <i class="devicon-css3-plain-wordmark colored"></i>
            <i class="devicon-bootstrap-plain-wordmark colored"></i>
            <i class="devicon-jquery-plain-wordmark colored"></i>
        </div>
    </div>
</div>

<div class="container">
    <h1>Projects</h1>
    <div class="carousel slide" id="projectCarousel">
        <ol class="carousel-indicators">
            <li data-target="#projectCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#projectCarousel" data-slide-to="1"></li>
            <li data-target="#projectCarousel" data-slide-to="2"></li>
            <li data-target="#projectCarousel" data-slide-to="3"></li>
            <li data-target="#projectCarousel" data-slide-to="4"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="https://cdn.rawgit.com/Cookrp924/Quote-Generator/cff1b444/QuoteGenerator.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41815477-17a21464-773a-11e8-8bf7-c2748cd13075.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Wikipedia-Viewer/cd5e1683/Wiki.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41825874-c749c87c-77f2-11e8-9de6-58b48b1ca5fb.jpeg"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Local-Weather-App/37555f33/LocalWeather.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41827757-449b5a28-77ff-11e8-9e44-e37f8b6cd093.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Tic-Tac-Toe/99e0b7f2/Tic-Tac-Toe.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844177-647fe7d0-783d-11e8-88d7-4251b81a591d.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Simon/4a4c0ea8/Simon.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844777-43195570-783f-11e8-88ed-8bf0c40c7419.png"></a>
            </div>
        </div>
        <a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

You are actually hiding your prev and next icons. Update your code like below.

<a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon"></span>
</a>

Fiddle DEMO

Carousel � Bootstrap, It also includes support for previous/next controls and indicators. In browsers where Carousels don't automatically normalize slide dimensions. As such, you � Bootstrap 3 vs. Bootstrap 4. Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness. Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported.

I tried that, but the arrows still don't show up. This is my code at the moment. If someone can please come back to me quickly, that would be very much appreciated.

<head>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Deganis on Wheels</title>

    <style>
        .carousel img{
            max-height: 450px;
        }
    </style>

</head>

<body>

    <nav class="nav nav-pills nav-fill">

        <a class="nav-item nav-link active" href="C:\Users\ohdeg\Documents\Family website.html">Home</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family Website Map Page.html">Map</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family website Facts.html">Facts</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family website Journal.html">Journal</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family Website Videos.html">Videos</a>

    </nav>

    <center>
        <h1 class="mt-3">
            Deganis on Wheels
        </h1>

    <div id="carouselExampleControl" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://scontent.fdub3-1.fna.fbcdn.net/v/t1.0-9/69250540_10157516532942838_2757624069254807552_n.jpg?_nc_cat=107&_nc_oc=AQkuXrUeviY6CXoQkPxGem-bnVVa0UbQZOX5ErsQLekyjvWsaQFUE2MPwQJCDY0tsEw&_nc_ht=scontent.fdub3-1.fna&oh=cfed540908f484393112c64a69edbbed&oe=5E0FD771" class = "" alt="">

            </div>

            <div class="carousel-item">
                <img src="https://scontent.fdub3-1.fna.fbcdn.net/v/t1.0-9/68547946_10157516532207838_5519242750152671232_n.jpg?_nc_cat=109&_nc_oc=AQmqaeIU-05SDz6t8-ls6w90x1WTn5RX6CLIa1hJQ_A77XYJKjM68cTQyoHoxyC0z9Y&_nc_ht=scontent.fdub3-1.fna&oh=13afc36f27fe9bbcfb0d6deb0be08dea&oe=5E10D6A5" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

        </div>

        <a class="carousel-control-prev" href="#carouselExampleControl" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon">Previous</span>
        </a>

        <a class="carousel-control-next" href="#carouselExampleControl" role="button" data-slide="next">
          <span class="carousel-control-next-icon">Next</span>
        </a>

    </div>

    </center>

</body>

Bootstrap 4 Carousel, Bootstrap 4 Carousel The following example shows how to create a basic carousel with indicators and <span class="carousel-control-prev-icon"></span > A Bootstrap 4 carousel is a slideshow component that will allow you to display slides of images and text within the component. A carousel is a good component for showcasing products, portfolio items, testimonials, and other items on your website. The slides of a Bootstrap 4 carousel change automatically.

This worked for me:

<a class="carousel-control left carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
          </a>
          <i class="fa fa-angle-left"></i><i class="fa fa-angle-left">
          </i>
          <div align="right" style="float:right">
            <a class="carousel-control right carousel-control-next" href="#carouselExampleIndicators" data-slide="next" style="align-text:right">
            </a>
            <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i>
          </div>

Carousel controls doesn't work, Hi, The buttons (next and previous button) doesn't work when I click on each one. Any solution or idea mandarin May 4, 2018, 9:45am #2 Create a blank document and try it, so you will see that the carousel doesn't work. <script src=" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"� The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.

Bootstrap Carousel - examples, tutorial & advanced usage, On top of the slides themselves, carousels can have previous / next controls to allow the user to manually navigate the slides; indicators to show which slide is� This tutorial was originally created for Bootstrap 3 in 2016.. Now, in 2018, I have completely rewritten it for Bootstrap 4. If you still need to use the Bootstrap 3 version, you will find the original files in the download package and I created a new Bootstrap 3 section in this article where the main differences are outlined and I also mention few Bootstrap 3 carousel tweaks.

Bootstrap 4: Carousel, Bootstrap carousel is a slideshow component for cycling through HTML elements . Carousels don't automatically normalize slide dimensions. While carousels support previous/next controls and indicators, they're not� Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required.

Bootstrap Carousel, Carousels don't automatically normalize slide proportions. completed through defining two web links components having the class .carousel-control as wrapped inside a .carousel-item which is a fresh class for Bootstrap 4 Framework -- the� Bootstrap carousel is responsive and interactive slideshow which is created for presenting content, especially images and videos.