What is the best way to center a form within a jumbotron using CSS?

I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected.

Even though I copied the code from a tutorial, it functions perfectly there but fails when I attempt it on my own. I just need to identify where the mistake lies.

Below is the snippet of the code:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>

    <style type="text/css">
        .jumbotron{
            background: url(pic.jpg);
            background-size: 100% 100%;
            text-align: center;

        } 

    </style>

  </head>
  <body>


    <!-- Nav Bar -->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MyApp</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Download The App</a>
      </li>

    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Email">
      <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
    </form>
  </div>
</nav>


    <!-- Nav Bar -->

   <!-- JumboTron Header -->


<div class="jumbotron">
  <h1 class="display-4">My Awesome App!</h1>
  <p class="lead">This is why YOU should download this fantastic app!.</p>
  <hr class="my-4">
  <p>Want to know more? Join our mailing list!</p>

  <!-- inline form -->

  <form class="form-inline">
    <div class="form-group">
     <label class="sr-only" for="email">Email address</label>
       <div class="input-group">
           <div class="input-group-text">@</div>
            <input type="email" class="form-control" id="email" placeholder="Your email">

       </div>    


    </div>  
  <button type="submit" class="btn btn-primary">Sign up</button>      

  </form>

  <!-- inline form -->


</div>

    <!--JumboTron Header -->



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

Answer №1

Consider updating the class name to:

<form class="form-inline justify-content-center">

Check out this example:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>

    <style type="text/css">
        .jumbotron{
            background: url(pic.jpg);
            background-size: 100% 100%;
            text-align: center;

        } 

    </style>

  </head>
  <body>


    <!-- Nav Bar -->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MyApp</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Download The App</a>
      </li>

    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Email">
      <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
    </form>
  </div>
</nav>


    <!-- Nav Bar -->

   <!-- JumboTron Header -->


<div class="jumbotron">
  <h1 class="display-4">My Awesome App!</h1>
  <p class="lead">This is why YOU should download this fantastic app!.</p>
  <hr class="my-4">
  <p>Want to know more? Join our mailing list!</p>

  <!-- inline form -->

  <form class="form-inline justify-content-center">
    <div class="form-group">
     <label class="sr-only" for="email">Email address</label>
       <div class="input-group">
           <div class="input-group-text">@</div>
            <input type="email" class="form-control" id="email" placeholder="Your email">

       </div>    


    </div>  
  <button type="submit" class="btn btn-primary">Sign up</button>      

  </form>

  <!-- inline form -->


</div>

    <!--JumboTron Header -->



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

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

Guide to effectively retrieving data from S3 and displaying a view at regular intervals of 4 seconds

In my current project, I am working on fetching a file from S3 and utilizing the data within that file to generate a map on a webpage. To achieve this task, I have set up an Express server along with the EJS templating engine for serving and rendering the ...

The HTML webpage is optimized for desktop and tablet viewing, but has difficulty displaying correctly on mobile phones

Just starting out with HTML and created a website using HTML and CSS that is now live. It looks good on desktop and tablet (iPad) but not so great on mobile devices. Tried different solutions, including viewport settings, to fix the issue with no success. ...

Having trouble with this 'string', need assistance with the syntax error

I have the following code snippet: $fq.=" + (fritidsboende_uth_from:[$fritids_uth_from TO *] AND fritidsboende_uth_to:[* TO $fritids_uth_to]) OR (fritidsboende_uth_from:'1972-01-01T01:01:00Z' AND fritidsboende_uth_to:'2019-01-01T01:01:00 ...

Utilizing Selenium to extract data from a table and displaying the results

I am looking to scrape tables from a specific website, but I am new to automation with Selenium. Here is the code snippet that I have come up with after doing some research: from selenium.webdriver import Firefox from selenium.webdriver.common.by import By ...

Accordion menu designed exclusively with JavaScript

Implementation of required menu structure: Main Menu Submenu Contacts News Photo Submenu Submenu Submenu Main Menu Main Menu Main Menu When clicking on the "Main Menu" button, a list of "Submenu" elements opens. Clicking on the "Submenu" button ope ...

Conditional text-boxes can be added to table columns based on certain conditions

I am working with a table that has three columns: type, 1st type, and 2nd type. The type column contains a button which toggles between two values, Db and Cr. I need to dynamically add a text box to the 1st type column when the button's value is Db, a ...

Utilize Javascript to generate intricate table headers based on JSON data

I am currently facing a challenge in creating an HTML table header with colspan. I have a JSON object as follows: var metadata = [{ "colIndex": 0, "colType": "String", "colName": "PM" }, { "colIndex": 1, "colType": "String", "colName": "PR ...

Custom Sizing for Bootstrap Modals

I need assistance with creating a dynamic bootstrap modal that adjusts its width based on the content and includes a vertical scrollbar when needed. Although the vertical scrollbar is functioning correctly, the horizontal width appears to be static. C ...

Retrieve a specific child element by clicking on a custom control on the map

I have a container element with three child spans. Using JQuery, I can determine which child was clicked when the container is clicked by utilizing the following function: $('.unitContainer').on('click','span',function(){ ...

Storing and accessing nested JSONB data in PostgreSQL within a Rails form

Upon realizing the lack of information on utilizing rails forms to store and retrieve JSON data, I encountered a specific issue: Within my form, I am creating a nested structure in JSON: = form_for(@car) do |cf| = cf.fields_for :locations do | locati ...

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

Menu Drop on top of Flash player

A challenge I am currently facing is with my live event site and the list of events displayed in a mouseover menu. The issue arises when the flash streaming player remains in front of the mouseover menu, causing interference across all versions of Interne ...

How about designing a button with a dual-layered border for a unique touch

Looking for a specific button: My attempted CSS code that's not working: button { font-family: 'Ubuntu', sans-serif; font-size: 1em; font-weight: bold; color: white; border: 3px double #f26700; background: #f26700; ...

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). https://i.sstatic.net/QkfC1.png <div class="flex"> <div class="etc"> ...

Use the Arrow Keys to guide your way through the Page

I am looking to enhance user experience by allowing them to easily navigate through my webpage using the arrow keys on their keyboard. The goal is for users to be able to move from one section to the next in a seamless manner, unless they are focused on an ...

When attempting to execute a function when a hidden div is not displayed, JQuery encounters an

I'm currently attempting to modify the text color of the h2 title with the id ticketSearchTitle when the ticketSearch div is not visible. However, the code I have been using to achieve this seems to cause issues (such as the absence of a pointer icon ...

The issue of the horizontal navigation bar not functioning properly persists when a specific width

I am currently working on building a horizontal navigation bar using CSS. What puzzles me is that when I specify a width for my ol tag, the horizontal float function does not seem to cooperate. However, if I remove the width property, everything works jus ...

Android not showing scroll bar in ion-scroll feature

I am experiencing an issue where a div with a fixed height displays a scroll bar on browsers but not on an Android phone. <ion-scroll style="height:300px;" scrollbar-y='true'> //content </ion-scroll> ...

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

Pass the input value directly to typescript without the need for a send button

I am looking to capture user input from a regular text box: <form> <input type="text" oninput="sendInput()" /> </form> My goal is to send the user's typed input directly to a typescript file without the need for a submit button ...