JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

  <title>Bootstrap Example</title>


    <div class="navbar navbar-default navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">

          <a href="#" class="navbar-brand">website</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
          </button>

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

<div class="col-sm-offset-7 col-sm-5" style="margin-right:0px;padding-right:0px; height:100vh;">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://culturieuse.files.wordpress.com/2015/02/arearea_by_paul_gauguin-joyfulness-1892.jpg" alt="Chania" >
      </div>

      <div class="item">
        <img src="http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg" alt="Chania" >
      </div>
    
      <div class="item">
        <img src="http://www.leboismiroir.fr/wp-content/uploads/Pld-Gauguin.jpg" alt="Flower">
      </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right...

CSS

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }