Ways to align a form in the middle of a Bootstrap 4 jumbotron

<div class="special-center">
  <h1 class="unique-header">Special Text</h1>
  <p class="callout-text">Unique content goes here.</p>
  <hr class="line-break">
  <p>################</p>
  <form class="styled-form">

    <label class="hidden-label" for="email">Email</label>
    <div class="input-group-container">
      <div class="custom-input-group">
        <div class="special-icon">@</div>

        <input type="email" class="custom-input" id="email" placeholder="Enter your email">
      </div>

    </div>

    <button type="submit" class="action-button">Submit</button>
  </form>
</div>

Trying to create a unique layout with an eye-catching form placed centrally within a special container, but facing some challenges in getting it right.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve center alignment in this scenario using Bootstrap 4, you can utilize the class justify-content-center.

Below is the functioning code snippet:

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

<div class="jumbotron text-center" id="jumbotron">
    <h1 class="display-3">Lorem Ipsum</h1>
    <p class="lead">Lorem ipsum</p>
    <hr class="my-y-2">
    <p>################</p>
    <form class="form-inline justify-content-center">

        <label class="sr-only" for="email">Email</label>
        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <div class="input-group-text">@</div>

                <input type="email" class="form-control" id="email" placeholder="Email">
            </div>

        </div>

        <button type="submit" class="btn btn-primary mb-2">Sign Up</button>
    </form>
</div>

Answer №2

If you're having trouble understanding why your form isn't centered in your CSS, it would be helpful to see the code you've written. One way to center your form is by wrapping it in a div element with the following styles:

Here's an example using JSFiddle.net

#form-align
  {
   display: block;
   text-align: center;
 }
form
  {
   display: inline-block;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

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 table is not displaying the CSS class as intended

I need to modify the behavior of a table so that upon clicking on a value, a specific class is set and the user is redirected to a particular page. The structure of the table is as follows: <?php // Determine the file name based on content type if( ...

phphtmlcss

"Enhance User Experience: Use CSS to highlight text selection based on

As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text t ...

jqueryhtmlcss

Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different b ...

htmlcssresponsive-design

Expansive width of form field

I have a yellow top bar that is fixed in position and spans 100% of the width. Inside this bar, there is a red div with fluid width on the left and a green div containing an input element on the right. The input element needs to take up the remaining spa ...

jqueryhtmlcsslayoutstylesheet

Incorrect x and y coordinates in the 'onclick' event

Hey there, I'm currently working on a simple prototype for an app. The concept is straightforward: there is a box, and when you click on it, it creates a square that changes color when clicked on. The issue I'm facing is that when I click on the ...

javascripthtmlcss

I am experiencing difficulty in integrating Shopify buy buttons with the bootstrap grid system

Currently, I am facing an issue where I am attempting to showcase a group of 4 Shopify buy buttons side by side within a Bootstrap grid system. However, despite my efforts, they do not align horizontally as intended. Below is a snippet of the code: <di ...

bootstrap-4

The validation function in JQuery does not execute the validate() method on the form

Incorporated within a Bootstrap Modal is a form that consists of two straightforward inputs: one for a question and another for a URL link. To ensure proper validation, jQueryValidation (http://jqueryvalidation.org) is utilized alongside jQuery Ajax to exe ...

jqueryjquery-uibootstrap-4jquery-validatebootstrap-modal

The button style from Angular Material is only effective when implemented in the app.component

I made the switch to a custom Material theme recently, and I've noticed that everything adopts the new theme except for the buttons in my components. The buttons are functional, as are other elements within the component. Adding color="primary" chang ...

cssangularsassangular-material

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

Having trouble centering text vertically in game grid using flexbox styling

I'm working on creating a tic-tac-toe game, but I'm struggling to get the x and o marks to align properly both vertically and horizontally. Take a look at my code below. The "marked" values are the ones containing letters: ul { display: fl ...

htmlcssflexboxvertical-alignment

What steps do I need to take to transform this HTML snippet into a Bootstrap design

Looking to convert the table below into bootstrap rows and columns. I'm not very familiar with bootstrap, but would like to give it a try. Any guidance on where to start would be greatly appreciated. Thank you for your help! <div id="section1"> ...

htmlcssbootstrap-4

Tips for rearranging several input containers at once

I'm struggling to align the two cells for the address input. I can adjust the inline one easily, but the others are giving me trouble. I'm looking for some creative feedback on how to make this work. .EMBody { position: relative; backgrou ...

htmlcss

What is the best way to incorporate an HTML button that triggers the execution of a PHP script?

Is there a way for me to create an HTML button that can retrieve the value of this specific URI? https://example.org/qrcodes/qrcode.php?user= As a beginner in PHP, I'm not sure how to go about implementing this. Within the PHP file named grcode.php ...

phphtml

javascript close the current browser tab

Can someone please help me with a JavaScript code to close the current window? I have tried the following code but it does not seem to work: <input type="button" class="btn btn-success" style="font-weight: b ...

javascripthtml

When I click on the button, the output does not appear

Even though I know how to write this in pure javascript, I am new to angular so when I click submit, nothing happens and I don't get any result. index.html <input type="text" ng-model="username" placeholder="Username"> <input type=" ...

javascripthtmlangularjsangular

The javascript function "Scroll to the element" is not functioning properly on my website. Perhaps using JQuery will resolve the issue

I used this bootstrap template to create my website. Everything worked perfectly except for the "scroll to the element script". I kept encountering the following error: Uncaught Error: Syntax error, unrecognized expression: [href=#],[data-toggle],[data-tar ...

javascriptjqueryhtmlcsstwitter-bootstrap

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

Tips for displaying a button when hovering over it on large screens and larger sizes

I am trying to achieve a specific behavior where the button with class .bookmark-btn is only visible on md size screens and smaller at all times. However, on lg size screens and bigger, it should only appear when hovered over. How can I accomplish this? Cu ...

cssbootstrap-4sass

What is the best way to add a media query to a <style> element?

I have implemented Skrollr for my Parallax animations, allowing me to use Parallax keyframes without writing them inline. To make the plugin utilize external stylesheets for the keyframes, it uses AJAX to locate the stylesheets imported via <link>. ...

jquerycssajaximportcss-animations

CSS: Adjusting color when hovering

I've been working on a website featuring clickable images, but I'm struggling with the ...:hover function. My goal is to have the image overlayed with a white color at 0.1 opacity upon hovering. <html> <head> <style> ...

htmlcssimagehoverbackground-color