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

The arrangement vanishes when using identical html/css coding

When using the same HTML/CSS coding, the layout disappears and appears misaligned on one page but works perfectly on another. The issue seems to be that the first section of the main area is getting a width of 938px instead of 5px. I've tried adding w ...

htmlcss

Using AngularJS directives in Markdown

I am currently working on creating a custom HTML directive using AngularJS that will allow me to display Markdown content in the browser. My goal is to have a <markdown> element with a src attribute that will dynamically load and render the specified ...

javascripthtmlangularjsmarkdown

troubles with downloading using the <a> tag

I attempted to create a personalized file name for user downloads, but I am having trouble using ${} in the process. My goal is: let foo = "name" let fileName = `${name}footer.html` <a download={filename} className="btn btn-info">Download</a> ...

htmlanchor

Obtain the option tag's name

One of my challenges is working with a dynamically created dropdown in HTML and having a dictionary in the back-end to retrieve keys. As users keep adding options to the dropdown, I face the issue of not having a value attribute like this: <option valu ...

javascripthtml

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

The <p> element nested inside a <div> element with font-weight styling

I'm struggling to make a large font size and weight fit into a div tag while aligning it vertically at the bottom. Can anyone help me with this issue? div { border:1px solid black; height:100px; } table { border:1px sol ...

htmlcssfont-size

Deliver real-time notifications to linked users by leveraging socket.io and node.js

Is there a solution for sending real-time updates to connected clients every second without using the setInterval() function in nodejs and socket.io? Please provide an alternative method that fits my specific scenario. ...

javascriptjqueryhtmlnode.jssocket.io

Image failing to appear in .php document

I am experiencing an issue with my basic webpage where images are not appearing when I link to them locally. Oddly enough, when using a full URL linking to an external site, the image displays perfectly fine. Here is the code snippet in question: <html ...

phphtmlimage

Delete the option to alter button in the Jasny file input tool

I recently incorporated the Jasny Fileinput Widget into my existing form. However, I noticed that when I select a new file, it displays two buttons: Change and Remove. In this case, I believe the Change button is unnecessary and would like to remove it com ...

phpjquerycssfile-uploadjasny-bootstrap

What is causing the text to not wrap around properly?

I'm currently facing an issue where the text that should not wrap around the image is wrapping, while the text that should be wrapped isn't. This is causing a layout problem in my coding section as shown here: The desired layout is to have the i ...

htmlcss

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...

cssangularangular-material

Article with content surpassing the boundary of its parent container

I'm struggling to contain text within the parent's div as it keeps overflowing. I attempted using element.style { text-overflow: ellipsis; overflow: hidden; } but unfortunately, it didn't work. Take a look here at my JSFiddle link. It ...

htmlcss

Using Javascript to save a numeric value and accessing it on a different webpage

I'm encountering an issue with a specific feature on my website. I want users to click on a hyperlink that will redirect them to an application form page. The challenge is ensuring that the reference number (a 5-digit code displayed as a header) is st ...

javascripthtml

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Looking for a JavaScript code to create a text link that says "submit"?

Here is the code I have, where I want to utilize a hyperlink to submit my form: <form name="form_signup" id="form_signup" method="post" action="/" enctype="multipart/form-data"> ... <input type="submit" value="Go to Step 2" name="completed" /> ...

javascripthtmlforms

In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

In my HTML form, users can input their first name, last name, and phone number to create an account ID. The textboxes for first name, last name, and account ID work smoothly on all browsers except Firefox. Surprisingly, the phone number textbox doesn' ...

javascripthtmlcss

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

Is there a way to store mathematical equations in a database efficiently?

My website is built in Asp.net and I am utilizing MySql as my database. I have several sample math papers saved in Microsoft Office Word format. What I need is an HTML input tool, such as a textbox or editor, that will allow me to directly copy mathematica ...

htmlasp.netdatabasematheditor

Convert PHP function output to HTML element

Check out the content of my Class.php file: <?php class Class { public function validate() { if(empty($_POST['first_name'])) { return 'first name should not be empty!'; } elseif(em ...

phphtml

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4