The alignment of the container (heading) does not match that of the row (form) in Bootstrap 5

As mentioned in the title, I am looking to ensure that the rows have the same spacing as the container. I am currently using Bootstrap 5, so when you preview the HTML on Stack Overflow, it may not appear exactly as intended. To provide a clearer understanding, I have included an image.

<div class="container position-absolute top-50 start-50 translate-middle">
    <div class="container pt-5">
        <div class="h-100 p-5 rounded" style="background-color: beige;">
            <div class="display-4 text-center">Create a New Customer</div>
        </div>
        <hr>
    </div>
    <div class="row">
        <div class="col-xl-6">
            <div class="row mb-3">
                <div class="col-6">
                    <input type="text" name="txtName" class="form-control border-dark" placeholder="First Name *" value="" #firstName />
                </div>
                <div class="col-6">
                    <input type="text" name="txtName" class="form-control border-dark" placeholder="Last Name *" value="" #familyName/>
                </div>
            </div>
            <div class="mb-3">
                <input type="text" name="txtEmail" class="form-control border-dark" placeholder="Email *" value="" #email/>
            </div>
            <div class="mb-3">
                <input type="text" name="txtPhone" class="form-control border-dark" placeholder="Phone Number *" value="" #phoneNumber/>
            </div>
        </div>
        <div class="col-xl-6">
            <div>
                <textarea name="txtMsg" class="form-control border-dark" placeholder="Description" style="width: 100%; height: 150px;" #description></textarea>
            </div>
        </div>
        <div class="text-center mt-3">
            <input type="submit" name="btnSubmit" class="btn border-dark" value="Save" style="background-color: beige;"/>
        </div>
    </div>
</div>
https://i.sstatic.net/rH1Km.png

Answer №1

To easily apply the .container styles to your div.row, just enclose it with a div.container.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c6d9c4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container position-absolute top-50 start-50 translate-middle">
    <div class="container pt-5">
        <div class="h-100 p-5 rounded" style="background-color: beige;">
            <div class="display-4 text-center">Create a New Customer</div>
        </div>
        <hr>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="row mb-3">
                    <div class="col-6">
                        <input type="text" name="txtName" class="form-control border-dark" placeholder="First Name *"
                            value="" #firstName />
                    </div>
                    <div class="col-6">
                        <input type="text" name="txtName" class="form-control border-dark" placeholder="Last Name *"
                            value="" #familyName />
                    </div>
                </div>
                <div class="mb-3">
                    <input type="text" name="txtEmail" class="form-control border-dark" placeholder="Email *" value=""
                        #email />
                </div>
                <div class="mb-3">
                    <input type="text" name="txtPhone" class="form-control border-dark" placeholder="Phone Number *"
                        value="" #phoneNumber />
                </div>
            </div>
            <div class="col-xl-6">
                <div>
                    <textarea name="txtMsg" class="form-control border-dark" placeholder="Description"
                        style="width: 100%; height: 150px;" #description></textarea>
                </div>
            </div>
            <div class="text-center mt-3">
                <input type="submit" name="btnSubmit" class="btn border-dark" value="Save"
                    style="background-color: beige;" />
            </div>
        </div>
    </div>
</div>

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

Having difficulties persisting information from freshly generated input fields with the "Add" button to the database

Currently, the issue lies with the database only accepting data from the first input field in PHP. <form class = "spendings" method ="POST" action="InsertToDatabase.php"> <div id="numbering">ITEM 1: </div> <div class="entry"> ...

Exploring the Robot Framework: Strategies for Identifying and Populating Input Text Fields

Link Here is a snippet of my HTML code: <input type="text" placeholder="Search for extensions" class="user-input" style="width: 370px;"> Despite trying to capture the Xpath of the input text field, I am encou ...

The automatic selection process for IE document modes

It may seem simple, but I'm a little perplexed about how IE decides which browser mode to use. In IE9, there are options such as IE9 Compatibility Mode, IE9, IE8, and IE7. These modes are selected automatically depending on the webpage. Can someone e ...

Discovering the name of an object property by locating its corresponding id

I am working with a basic JSON data structure where I need to retrieve the name from an object by comparing its ID. For example, if I have the number 2, I need to check if it matches any object's ID. If the ID is equal to 2, then I must fetch the corr ...

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Hello everyone, I'm new to this platform and seeking guidance on how to improve my post! I recently created a CRUD app using Angular. It consists of a basic form with 4 fields, a color picker using input type='color', and a submit button. U ...

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

Is your event listener failing to activate?

I have been working on a project where I gather array elements from user input and try to display them in an HTML table. Unfortunately, the event listener seems to not be triggering, and I can't figure out why. Here is the relevant HTML code: ...

What is the best way to specifically target and style a component with CSS in a React application?

I'm facing a small issue with the React modals from Bootstrap in my application. In index.html, I include the following: <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <link rel="stylesheet" href=& ...

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

I need to implement a feature in my Chrome extension that allows users to upload images directly to a specific folder named "upload" without needing a submit button. <form action="/upload"> <input type="file" name="myimages" accept="image/*"> ...

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Please help me with a solution. I have developed a registration form which effectively saves users' information in a Google Sheet. However, now I am yearning to create a login form that verifies the stored data and redirects the user to a different pa ...

Find the current location of the scroll bar on the view port

Currently, I am utilizing the Addazle React grid for my project. However, I need to incorporate endless scrolling functionality which is not already included in this grid system. Thus, I am tasked with devising my own solution for this issue. To successful ...

Seeking assistance with setting up checkboxes to sort through elements in an array

As a beginner in the world of HTML, JavaScript, and CSS, I have a basic understanding of these languages. My current class project requires me to create checkboxes that can filter out content from an array based on the presence of a certain letter in the a ...

Eliminate odd white spacing within nested div elements in Chrome

Is there a way to eliminate the odd white space between two nested divs in Chrome? <div class="bar"> <div class="progress"> </div> </div> .bar { width: 200px; height: 6px; border: 1px solid black; ...

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

I wonder where this design is originating from

After exploring several of the suggested questions that appeared while typing, I was unable to find a solution to my issue. Currently, I am utilizing Uikit V2 and I have implemented a div with the Sticky component as shown below: <div class="uk-st ...

Arrange two input fields side by side if the quantity of input fields is unspecified

I am currently in the process of developing a project using Angular. I have implemented an *ngFor loop to dynamically add input fields based on the data retrieved from the backend. Is there a way I can ensure that two input fields are displayed on the same ...

A website with two distinct pages, where only the first page is refreshed

I have split the content of my HTML page into 2 separate subpages, based on the references provided below: Multiple distinct pages in one HTML file This is how my code is structured: ... <script> function show(shown, hidden) { document.getEle ...

After submitting the form, the delete button in Bootstrap 4 has transformed into an unusual shape

I have a panel on my page, inside the panel header there is a red delete button. The panel content includes a form with several buttons (the red delete button is not inside the form, but linked to it with the form="abc" attribute). In the image below, whe ...