Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"?

<html>
<head>
 <title>test</title>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         </head>
        <body>



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

          <div class="carousel-inner" role="listbox">

                   <div class="item active">

             <img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" width="100%" height="100%">
           </div>
           <div class="item">
        <img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg"  width="100%" height="100%" class="img-responsive">
            </div>

        <div class="item">
           <img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg"  width="100%" height="100%" class="img-responsive">
          </div>
          </div>
         <div class="vertical-center">
        <div class="container-fluid">
            <div class="row">
         <div class="col-md-4 col-sm-4 col-xs-12">
            <form>
            <div class="form-group">
                <label for="numeutilizator">Nume de utilizator</label>
                <input type="text" name="unr" class="form-control" id="numeutilizator" placeholder="Nume de utilizator">

            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="emr" class="form-control" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95d0f8f4fcf9d5f0f8f4fcf9bbf1faf8">[email protected]</a>" id="email">
            </div>
            <div class="form-group">
                <label for="parola">Parola</label>
                <input type="password" class="form-control" name="pwr"  placeholder="********" id="parola">
            </div>
                  <div class="form-group">
                   <input type="submit" name="r" class="btn btn-default" value="Inregistreaza-te">
</div>

                      </form>
                   </div>
                </div>
               </div>
                      </div>
                    </body>
                   </html>

css code

.vertical-center {
 min-height: 100%; 
  min-height: 100vh; 
 display: flex;
    align-items: center;}
      form
   {
   border-radius: 15px 15px 15px 15px;
 margin:auto;
       padding: 25px;
    text-align: center;
     background-color:rgba(237,237,237,0.5);
    background-color:hsla(0, 0% ,93%,0.5);
         width: 500px;
          }

I have attempted using z-index and other methods, but have not been successful. My objective is to set the carousel as a background image. If anyone has any advice or suggestions on how to achieve this, please let me know. Alternatively, is there another element similar to a carousel that could be used as a slide...? or view the jsfiddle link below.

https://jsfiddle.net/7bzL8p2y/11/

htmlcssformsbootstrap-4

Answer №1

It seems like you are on the right track. Just a few more tweaks needed - add position: absolute;, width: 100%;, and top: 0; to your .vertical-center class in the CSS.

Feel free to test the code snippet below or view the Updated Fiddle for a clearer visual representation since it may be challenging to see in the Stack Overflow snippet viewer. Hope this helps!

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 0;
}

form {
  border-radius: 15px 15px 15px 15px;
  padding: 25px;
  text-align: center;
  background-color: rgba(237, 237, 237, 0.5);
  background-color: hsla(0, 0%, 93%, 0.5);
  width: 500px;
}

#carousel-img {
  height: 100vh;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://wallpaperscraft.com/image/asia_skyscrapers_river_top_view_night_lights_city_28590_1920x1080.jpg" class="img-responsive" id="carousel-img">
    </div>
    <div class="item">
      <img src="http://eskipaper.com/images/top-city-wallpapers-1.jpg" class="img-responsive" id="carousel-img">
    </div>
    <div class="item">
      <img src="http://www.creativehdwallpapers.com/uploads/large/city/top-5-city-wallpaper.jpg" class="img-responsive" id="carousel-img">
    </div>
  </div>

  <div class="vertical-center">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-12">
          <form>
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" name="un" class="form-control" id="username" placeholder="Username">

            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" name="em" class="form-control" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="efaa828e8683af8a828e8683c18b8082">[email protected]</a>" id="email">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" name="pw" placeholder="********" id="password">
            </div>
            <div class="form-group">
              <input type="submit" name="r" class="btn btn-default" value="Register">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

If you prefer the form to have some space from the top of the viewport, adjust the top: 0; with the desired distance such as top: 10px; or top: 20px;

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

Learn how to extract JSON information from a URL and integrate it into either a table or dropdown in Vue.js

Looking to retrieve a JSON data array from a URL and utilize it to populate either a table or dropdown with Vue.js and Axios. Here is the link where I intend to fetch the data. Any advice on how to accomplish this? https://jsonplaceholder.typicode.com/us ...

htmlvue.js

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

javascriptclasshtmlfacebook-like

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

javascripthtmlcss

Step-by-step guide on clipping a path from an image and adjusting the brightness of the remaining unclipped area

Struggling to use clip-path to create a QR code scanner effect on an image. I've tried multiple approaches but can't seem to get it right. Here's what I'm aiming for: https://i.stack.imgur.com/UFcLQ.png I want to clip a square shape f ...

javascripthtmlcss

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...

javascripthtmldjangovue.js

Perfectly aligning the Update Progress Animation in real-time

I am currently utilizing the Ajax UpdateProgress with a loading gif attached. The issue I am facing is how to ensure that the loading.gif always appears in the center of the screen, even if the user is at the very top or bottom of the page. Is there a meth ...

cssajaxupdateprogress

Tips for duplicating specific div elements

Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...

javascriptjqueryhtmljquery-uiclone

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

javascriptcssreactjsmaterial-ui

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

There are two buttons (images with anchors) on the page: "Download from Google Play" and "Download from App Store". The request is to have them stick to the bottom, but once the footer is reached they should return to their original position. Here are two ...

javascriptjqueryhtmlcssfrontend

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

javascriptcssangularjsng-animate

Bizarre actions with jQuery append in Internet Explorer 8

Issue with adding elements to a div in IE8: The element is not added until the button is clicked twice, resulting in two new elements being added at once. Here's the code snippet in question: $(options.addButton).click(function(event) { var proto ...

javascriptjqueryhtmlcssinternet-explorer-8

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

javascriptandroidhtml

What is the best way to retain the background image in a fixed position?

Is there a way to fix the size of the picture in my code? The current size is 5834*3886, but when I minimize the browser, part of it disappears. Here is the CSS code I have written: .contact{ position: relative; min-height: 100vh; padding: 50 ...

cssbackground-image

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

javascriptcssdom

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

Is there a way to retrieve the current date and time in the format of years, months, days, hours, minutes, seconds, and milliseconds like this? 201802281007475001 Currently, I am getting something like: 2018418112252159 This is my code so far: var dat ...

javascripthtmlnode.jsdatedatetime

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

javascripthtmlselect

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

Putting off the execution of a setTimeout()

I'm encountering difficulties with a piece of asynchronous JavaScript code designed to fetch values from a database using ajax. The objective is to reload a page once a list has been populated. To achieve this, I attempted to embed the following code ...

javascriptajaxhtml

Using Django Template Variables in JavaScript Functions

Within one of my templates, there is a for loop that iterates over all the items. Whenever a user likes or dislikes an item, it should trigger a function in my code. I successfully set up the button's HTML like this: <button onclick='update_li ...

javascripthtmldjangodjango-viewsdjango-templates