Bootstrap 4 Image slider to add forms cant do small size and center

up vote
0
down vote

favorite

I used my angular 6 project landing page to bootstrap 4 carousel, carousel is working fine, and i added some form like a booking.com , i have some issue that forms is cant do the small size and center

anyone know how to do that like as booking.com

my code part

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

html css bootstrap-4 angular6

share|improve this question

edited yesterday

asked yesterday

core114

1,36851849

add a comment | 

up vote
0
down vote

favorite

I used my angular 6 project landing page to bootstrap 4 carousel, carousel is working fine, and i added some form like a booking.com , i have some issue that forms is cant do the small size and center

anyone know how to do that like as booking.com

my code part

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

html css bootstrap-4 angular6

share|improve this question

edited yesterday

asked yesterday

core114

1,36851849

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I used my angular 6 project landing page to bootstrap 4 carousel, carousel is working fine, and i added some form like a booking.com , i have some issue that forms is cant do the small size and center

anyone know how to do that like as booking.com

my code part

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

html css bootstrap-4 angular6

share|improve this question

edited yesterday

asked yesterday

core114

1,36851849

I used my angular 6 project landing page to bootstrap 4 carousel, carousel is working fine, and i added some form like a booking.com , i have some issue that forms is cant do the small size and center

anyone know how to do that like as booking.com

my code part

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="row " style="z-index: 99999;  top: 40%;

 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">

    <div class="booking-form col-12" >

      <form >

        <div class="row col-12">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

html css bootstrap-4 angular6

html css bootstrap-4 angular6

share|improve this question

edited yesterday

asked yesterday

core114

1,36851849

share|improve this question

edited yesterday

asked yesterday

core114

1,36851849

share|improve this question

share|improve this question

edited yesterday

edited yesterday

edited yesterday

asked yesterday

core114

1,36851849

asked yesterday

core114

1,36851849

asked yesterday

core114

1,36851849

1,36851849

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

up vote
1
down vote



accepted

There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

share|improve this answer

answered yesterday

Nidhi

1,0361316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hello Nidi, Thanks for your solution , its work for me
  – core114
  yesterday
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372618%2fbootstrap-4-image-slider-to-add-forms-cant-do-small-size-and-center%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote



accepted

There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

share|improve this answer

answered yesterday

Nidhi

1,0361316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hello Nidi, Thanks for your solution , its work for me
  – core114
  yesterday
  

  
  
  
  

add a comment | 

up vote
1
down vote



accepted

There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

share|improve this answer

answered yesterday

Nidhi

1,0361316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hello Nidi, Thanks for your solution , its work for me
  – core114
  yesterday
  

  
  
  
  

add a comment | 

up vote
1
down vote



accepted

up vote
1
down vote



accepted

There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

share|improve this answer

answered yesterday

Nidhi

1,0361316

There is no need for extra row (<div class="row " style="z-index: 99999; top: 40%;
position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">)
instead add a div(here: form-wrapper ) and add some css for positioning div at center

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

.section .section-center {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

}







#booking::before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(255, 255, 255, 0.15);

}



.booking-form {

  background: #fff;

  border-radius: 2px;

}



.booking-form>form .row.no-margin {

  margin-right: 0px;

  margin-left: 0px;

}



.booking-form>form .row.no-margin>[class*="col-"] {

  padding-right: 0px;

  padding-left: 0px;

}



.booking-form .form-group {

  position: relative;

  padding: 25px;

  margin-bottom: 0px;

}



.booking-form .form-group:after {

  content: '';

  background: rgba(129, 131, 144, 0.15);

  position: absolute;

  top: 25px;

  bottom: 0;

  right: 0px;

  width: 2px;

  height: 75px;

}



.booking-form .form-control {

  background-color: transparent;

  border-radius: 0px;

  border: none;

  height: 50px;

  -webkit-box-shadow: none;

  box-shadow: none;

  font-size: 20px;

  color: #222;

  font-weight: 400;

  padding: 0;

}



.booking-form .form-control::-webkit-input-placeholder {

  color: #818390;

}



.booking-form .form-control:-ms-input-placeholder {

  color: #818390;

}



.booking-form .form-control::placeholder {

  color: #818390;

}



.booking-form input[type="date"].form-control:invalid {

  color: #818390;

}



.booking-form select.form-control {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}



.booking-form select.form-control+.select-arrow {

  position: absolute;

  right: 0px;

  bottom: 30px;

  width: 32px;

  line-height: 32px;

  height: 32px;

  text-align: center;

  pointer-events: none;

  color: #818390;

  font-size: 14px;

}



.booking-form select.form-control+.select-arrow:after {

  content: '279C';

  display: block;

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

}



.booking-form .form-label {

  color: #07c;

  display: block;

  font-weight: 400;

  height: 25px;

  line-height: 25px;

  font-size: 14px;

}



.booking-form .form-btn {

  padding: 25px;

}



.booking-form .submit-btn {

  background: #07c;

  border: none;

  text-transform: capitalize;

  display: block;

  border-radius: 2px;

  width: 100%;

  height: 75px;

  font-size: 16px;

  font-weight: 400;

  color: #fff;

}













































/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */



body {

  padding-top: 3rem;

  padding-bottom: 3rem;

  color: #5a5a5a;

}





/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  min-height: calc(100vh - 110px);

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  min-height: calc(100vh - 110px);

}





/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 1.5rem;

  text-align: center;

}

.marketing h2 {

  font-weight: 400;

}

.marketing .col-lg-4 p {

  margin-right: .75rem;

  margin-left: .75rem;

}





/* Featurettes

------------------------- */



.featurette-divider {

  margin: 5rem 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -.05rem;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}



.form-wrapper {

  z-index: 99999;

    top: 50%;

    position: absolute;

    color: white;

    left: 50%;

    right: auto;

    margin: 0px;

    transform: translate(-50%,-50%);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-----------------------Header--------------------------------->







<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-light">

  <a class="navbar-brand" href="#">header</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">

    <ul class="navbar-nav mr-auto">



    </ul>

    <form class="form-inline mt-2 mt-md-0">



    </form>

  </div>

</nav>

<!-----------------------Header--------------------------------->

<main role="main">





  <div id="booking" class="section">

      <div class="section-center">









  <div class="form-wrapper ">

    <div class="booking-form" >

      <form >

        <div class="row">

          <div class="col-md-4">

            <div class="form-group">

              <span class="form-label">Location</span>

              <input class="form-control" type="text" placeholder="Location">

            </div>

          </div>

          <div class="col-md-4">









                <div class="form-group">

                  <span class="form-label">Event Type</span>

                  <select class="form-control">

                    <option>Event 1</option>

                    <option>Event 1</option>

                    <option>Event 1</option>

                  </select>

                  <span class="select-arrow"></span>

                </div>





          </div>

          <div class="col-md-4">

            <div class="form-btn">

              <button class="submit-btn">Check</button>

            </div>

          </div>

        </div>





      </form>

    </div>

  </div>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <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>





    <div class="carousel-inner">

      <div class="carousel-item active">

        <img class="first-slide" src="/assets/images/background.jpg" alt="First slide">

        <div class="container">





          <div class="carousel-caption text-left">

            <h1>Example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="second-slide" src="/assets/images/background.jpg" alt="Second slide">

        <div class="container">

          <div class="carousel-caption">

            <h1>Another example headline.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

      <div class="carousel-item">

        <img class="third-slide" src="/assets/images/background.jpg" alt="Third slide">

        <div class="container">

          <div class="carousel-caption text-right">

            <h1>One more for good measure.</h1>

            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>



          </div>

        </div>

      </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">

      <span class="carousel-control-next-icon" aria-hidden="true"></span>

      <span class="sr-only">Next</span>

    </a>

  </div>









      </div>



    <!-- /END THE FEATURETTES -->



  <!-- /.container -->



      </div>



</main>

share|improve this answer

answered yesterday

Nidhi

1,0361316

share|improve this answer

share|improve this answer

answered yesterday

Nidhi

1,0361316

answered yesterday

Nidhi

1,0361316

answered yesterday

Nidhi

1,0361316

1,0361316

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hello Nidi, Thanks for your solution , its work for me
  – core114
  yesterday
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hello Nidi, Thanks for your solution , its work for me
  – core114
  yesterday
  

  
  
  
  

Hello Nidi, Thanks for your solution , its work for me
– core114
yesterday

Hello Nidi, Thanks for your solution , its work for me
– core114
yesterday

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372618%2fbootstrap-4-image-slider-to-add-forms-cant-do-small-size-and-center%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here