Creating a responsive image carousel with Bootstrap 4 that is unable to accommodate small sizes and needs to be centered

Utilizing my angular 6 project landing page, I successfully integrated a bootstrap 4 carousel. The carousel functions properly, and I also included a form similar to booking.com. However, I am encountering an issue where the form cannot be resized to a smaller size and centered.

Does anyone know how to achieve a similar layout as seen on booking.com?

Below is an excerpt from my code:

.section .section-center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<!-- More CSS code follows -->


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

<!-- More HTML code follows -->

htmlcssbootstrap-4angular6

Answer №1

To avoid using an extra row (

<div class="row " style="z-index: 99999;  top: 40%;
 position: absolute; color: white; left: 100px; right: 5%; margin: 0px;">
), it is recommended to add a div named form-wrapper and apply some CSS for positioning the div at the 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;
}

/* Place custom global styles here
-------------------------------------------------- */

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with Firefox's rendering of HTML are causing display problems

The image above highlights an issue I am experiencing with my website. A small black line is protruding from behind my dropdown menu, and in Firefox the word resources appears below home. However, in IE and Chrome, the menu looks fine except for the small ...

htmlcssfirefox

The onclick function fails to function properly following an Ajax reload of the <div> element

I have an issue with my onclick function that only works the first time. Every time the onclick function triggers an ajax request, it successfully reloads a div which contains code to retrieve values from SQL and build an HTML table using a for loop. Alth ...

javascriptphphtmlajax

Prevent touch swiping on Bootstrap carousel in Safari

After adding the code snippet below to my Bootstrap carousel, I've encountered an issue where I am unable to disable touch swiping on iOS devices for the carousel. <div id="infinityWarContentWrapper" class="carousel slide carousel-sy ...

htmlcssbootstrap-5

Tips for submitting multiple pages with identical information

The initial page visited was registration.php Then the user went to pay.php <form action="success.php" method="post"> <input type="hidden" value=<?php echo json_encode($_POST); ?> custom="Hidden Element&qu ...

javascriptphphtml

Enhance the aesthetic appeal of the Search and Filters component in ASP.NET Core using Bootstrap styling

I am struggling to enhance the style and layout of multiple search filters on the page so that the User Experience is improved. I'm unsure how to effectively design this search component. <section class="search-sec"> <div class=&qu ...

htmlcssasp.net-corerazorbootstrap-4

Determine whether there is greater available space above or below a specific element within the DOM

I'm looking to create a dynamic layout where an input field is accompanied by a list in a div, positioned either above or below depending on available space. This setup needs to account for the fact that the input field could be located anywhere on th ...

htmlcssangularjstypescript

jQuery - Generating numerous instances

Currently, I am utilizing a jquery plugin for file uploads found at the following link: While the plugin works smoothly for a single upload box, I have attempted to set up multiple upload boxes by switching the ID to a class without success. Here is the ...

jqueryhtmlfile-upload

Hover over to reveal the button after a delay

I'm struggling with implementing a feature in my Angular code that displays a delete button when hovering over a time segment for 2 seconds. Despite trying different approaches, I can't seem to make it work. .delete-button { display: none; ...

htmlcssangularless

Use Javascript or jQuery to traverse a tree in postorder and generate HTML markup

I am looking to generate HTML code similar to the following: <ul> <li>Submenu 1 <ul> <li>Submenu 1.1</li> <li>Submenu 1.2 <ul> <li>Subm ...

javascriptjqueryhtmljson

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction

Transforming React drag and drop page builder state into a functional html, css, and js layout

Currently, I am in the process of developing a drag and drop UI builder for react-based app frameworks. Before incorporating drag and drop functionality, my main focus is on rendering a page layout based on a structured array stored in the state. https:// ...

javascripthtmlreactjsdrag-and-droprender

An advanced password checker that notifies the user of any spaces in their password

I need help fixing my JavaScript code. The program should prompt the user for a password using a dialogue box, and then validate that the input has no spaces. If a space is detected, the program should stop and display an alert saying "Invalid, contains a ...

javascripthtmlloopswhile-looppasswords

Attempting to convert data retrieved from a JSON file into HTML format

Currently, I am working on a basic project involving AJAX, JavaScript, and PHP (JSON data feed) as a means to learn more about web development. However, I have encountered a small roadblock in my progress. Specifically, I am trying to capitalize the firs ...

javascriptphphtmlcssajax

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

javascripthtmlmysqlcss

Ways to initiate JavaScript event upon clearing input form field

I'm working on creating a dynamic search feature. As the user types in the search box, JavaScript is triggered to hide the blog posts (#home) and display search results instead (the specific script for this is not shown below). However, when the user ...

javascripthtml

Troubleshooting ng-bind-html issue with displaying images loaded using CSS within HTML content

I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...

javascriptcssangularjsng-bind-html

Tips for enlarging text without affecting the neighboring elements through the use of flexbox

I am currently working on designing a layout where clicking on "See More" will expand the text within one container while keeping the surrounding containers in place. There are three containers, each containing two wrappers - a top wrapper with the title ...

htmlcssflexbox

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

A new game has been developed using html/javascript. Due to confidentiality reasons, the code cannot be fully shared. The game runs smoothly on most browsers except for IE, which poses a challenge. Compatibility with IE8 is essential, despite its limitati ...

javascripthtmlinternet-explorer

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Whenever I access a website using Chrome, a message appears in the status bar saying "Waiting for MyHost name" along with an Ajax Loader circle in the browser tab. Here is a javascript function that I am working with: function listen_backend_client_reques ...

javascripthtmlajaxbrowsergoogle-chrome