How can I center-align a form in BootStrap?

I am wondering how to center-align a form using bootstrap. Here is the code I have:

    <body>

<div class="p-3 mb-2 bg-light text-dark container text-center">
<h2>Reservation for Aljaz Apartment</h2>

<br>
<br>
<label><b>First Name: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="" >
<label><b>Last Name: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="" ><label><b>Phone Number: </b></label>
    <input type="text" class="form-control col-sm-6" disabled value="">
</div>
</body>
htmlcssbootstrap-4

Answer №1

When creating an HTML email template, it's important to consider using a table layout to avoid compatibility issues with various email clients.

While I do not recommend using flex in email templates, if you choose to do so, you can add the classes 

d-flex flex-column align-items-center
to your first div.

Answer №2

Ensure to include the CSS link for bootstrap4-5 right after your title tag, or alternatively, create custom CSS with the following property: text-align: center;

Answer №3

One must make use of the different centering methods provided by Bootstrap 4...

Utilize text-center for inline elements. Utilize justify-content-center for flexbox elements (e.g. form-inline)

Additionally, to offset the column, the col-sm-* should be enclosed within a .row, and the .row should be inside a container...

<section id="cover">
    <div id="cover-caption">
        <div id="container" class="container">
            <div class="row">
                <div class="col-sm-10 offset-sm-1 text-center">
                    <h1 class="display-3">Welcome to Bootstrap 4</h1>
                    <div class="info-form">
                        <form action="" class="form-inline justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input type="text" class="form-control" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" class="form-control" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e3e8e7eca7ede6ecc9ecf1e8e4f9e5eca7eae6e4">[email protected]</a>">
                            </div>
                            <button type="submit" class="btn btn-success ">okay, go!</button>
                        </form>
                    </div>
                    <br>

                    <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
                </div>
            </div>
        </div>
    </div>
</section>

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

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

javascripthtmlangularjsangularjs-directive

What type of layout engine is used to determine the positioning of HTML elements on a webpage?

I am currently working on a web data classification project and I'm interested in obtaining the coordinates of HTML elements as they are displayed in a web browser, without considering any CSS or JavaScript present on the webpage. I primarily use C++ ...

c++htmlwebkitgecko

Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code: @keyframes fade-in{ 0%{ opacity: 0%; } 100%{ opacity: 100%; } } @keyframes fade-out{ 0%{ opacity: 100%; } 100%{ opacity: 0%; } } Impleme ...

javascripthtmlcss

Experiencing difficulties with capturing the focus event of the <select> tag

I'm completely stumped at the moment... I just can't seem to get my head around how to make a jQuery $("thing").is(":focus") selector work with a <select> tag in my project. Here's what I've got so far: <input id="uText" name ...

jqueryhtmljquery-selectors

Having trouble reaching the elements stored in an array?

As a beginner in Angular and JavaScript, I may be making some obvious mistakes so please bear with me. I have written this code that allows the selection of 2 text files and then combines them into a single array. $scope.textArray = []; $scope.textUpload ...

javascripthtmlarraysangularjs

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

What is the best way to blend a portion of an image into a div?

Having a bit of trouble with overlapping my image onto another div in my current project. When you take a look at what I've been working on, you'll see there's an image that says "That's me!" and it needs to overlap the left side div. I ...

htmlcssimageoverlap

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

javascriptcsshtmlcursor

Guide to aligning text in a row using Bootstrap 4

One issue that is persisting is the fact that <p> and <h1> are displaying on the same line and despite my efforts, I am unable to center them properly. HTML <div class="container"> <div class="row" id="appSummary"> <h1> ...

twitter-bootstrapbootstrap-4

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="http ...

htmlcssformsbootstrap-4

What is the best way to ensure a dropdown in an input group occupies the full width?

One of the challenges I'm facing involves a row with 2 columns - the first column contains a title and the second column features an input group. Within the input group, there is an icon and a dropdown menu. Unfortunately, the dropdown menu is not oc ...

htmlcsstwitter-bootstrapbootstrap-4

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Utilizing SCSS to implement custom animations according to specific element IDs

How can I add different animations based on the ID of two DIVs with the same class when clicked? JSX: <div className="card"> <div id="front" className={frontClasses.join(' ')} onClick={clickedFront}> OPEN ...

javascripthtmlreactjssass

Implementing HTML5 form validation without a submit button and using a personalized error message

I am facing an issue with displaying the HTML5 inline validation bubble without the use of a submit button. The catch is, I am not allowed to use jQuery, only vanilla JavaScript. Here is the HTML I am working with: <a id="send" href="#">Send</a& ...

javascripthtmlformsvalidation

Tips for styling jqgrid header columns with CSS

Currently, I am creating a table using jqgrid. One of my objectives is to modify the background color and text color of the header. In my attempts to achieve this, I am experimenting with applying a class to the header. How can I effectively implement th ...

jquerycssjqgrid

What is the process for swapping true and false values ​​in HTML from JSON with online and offline statuses?

I am using a WordPress site and looking to utilize the API through JSON. The API provides a true/false result, displaying as either true or false. How can I showcase this information on the webpage as online when the result is true and offline when the res ...

javascripthtmljson

What steps can I take to decrease the padding of this footer?

Is there a way to reduce the height of the footer so it doesn't dominate the screen on both large and small devices? https://i.sstatic.net/nIQz6.png import { Container, Box, Grid } from "@material-ui/core"; const Footer = (props) => { ...

javascriptcssreactjsmaterial-ui

Zurb's Vertical Navigation Bar: A Stylish and Functional Design

I attempted to replicate the left navigation bar from this link: The responsive navigation bar and contents on the right caught my attention. Currently, I am working on a project that requires a similar navigation bar. While I am proficient in HTML and C ...

javascripthtmlcsszurb-foundation-5

What causes jquery-ui resizable to set the width of the div with the "alsoResize" property?

I have created a series of divs structured like this: <div id="body_container"> <div id="top_body"> </div> <div id="bottom_body"> </div> </div> Additionally, I have implemented the following funct ...

javascriptcssjquery-ui