Attempting to align DIV horizontally in the center

I am currently attempting to horizontally center the div with the id "lastrow".

<div class="container">
  <div class="row" style="text-align:center">
    <div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
    <div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
  </div>

  <div class="row" style="text-align:center">
    <div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
    <div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
  </div>

  <div class="row" style="text-align:center">
    <div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
    <div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
  </div>

  <div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
    <div class="col-md-12">
      <div>
        Message:&nbsp;
      </div>
      <div>
        <textarea id="mssg"></textarea>
      </div>
    </div>
    <div class="col-md-12">
      <div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
    </div>
  </div>
</div>

I'm uncertain if you require the CSS file since most of it pertains to widths.

Thank you for taking the time,

Don

htmlcssbootstrap-4

Answer №1

If you're utilizing bootstrap-4, simply add the default class text-center to center align the div. For an enhanced design, check out the bootstrap form.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row text-center">
        <div class="col-md-12">Name:
            <input type="text" id="name"><span class="vishid"> Name:</span></div>
        <div class="col-md-12">Company:
            <input type="text" id="comp"><span class="vishid"> Company:</span></div>
    </div>

    <div class="row text-center">
        <div class="col-md-12">Address:
            <input type="text" id="addr"><span class="vishid"> Address:</span></div>
        <div class="col-md-12">City:
            <input type="text" id="city"> ST:
            <input type="text" id="stat"> Zip:
            <input type="text" id="zip1">-
            <input type="text" id="zip2"><span class="vishid"> City:</span></div>
    </div>

    <div class="row text-center">
        <div class="col-md-12">E-Mail:
            <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
        <div class="col-md-12">Phone: (
            <input type="text" id="area">)
            <input type="text" id="pho1">-
            <input type="text" id="pho2"> Extension:
            <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
    </div>

    <div class="row text-center" id="lastrow">
        <div class="col-md-12">
            <div>
                Message:&nbsp;
            </div>
            <div>
                <textarea id="mssg"></textarea>
            </div>
        </div>
        <div class="col-md-12">
            <div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
        </div>
    </div>
</div>

Answer №2

To easily center a div, you can utilize the bootstrap grid system with row and col classes. Simply place your div code within the specified structure:

<div class="container">
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
              //insert your div code to center
<form>
  <div class="form-group row">
   <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
   <div class="col-sm-10">
   <input type="text" readonly class="form-control-plaintext" 
  id="staticEmail" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaba3afa7a28eabb6afa3bea2abe0ada1a3">[email protected]</a>">
 </div>
  </div>
  <div class="form-group row">
   <label for="inputPassword" class="col-sm-2 col-form- 
 label">Password</label>
  <div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword" 
  placeholder="Password">
   </div>
  </div>
</form>
              <!-- a bootstrap col has 12 that's why am divide col by 4 to 
 center 4+4+4 = 12 -->
        </div>
        <div class="col-md-4">
        </div>
    </div>
 </div>

//or follow this bootstrap forms layout to get this

https://getbootstrap.com/docs/4.3/components/forms/

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

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

javascriptcss

The PHP code encountered a parsing error due to an unexpected end of file

I encountered an issue: Parse error: syntax error, unexpected end of file in the line This is the code that triggered the error: <html> <?php function login() { // Code for login function } if (lo ...

phphtmlparse-error

Display icons next to badges in a Bootstrap list for a visually appealing design

I am facing a challenge with my Twitter Bootstrap list that includes badges and a delete icon. There are two issues I need assistance with: The badge is automatically positioned to the right of the list row, but I would prefer the delete icon to come aft ...

htmlcsstwitter-bootstrap

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

htmlcssbootstrap-5

Place picture in the bottom right corner of the div without using absolute positioning

I am looking for a way to position an image in the lower right corner of a div, but I want to avoid using absolute positioning. The reason for this is that when I use absolute positioning, the text wrap is affected due to the float right applied to the ima ...

htmlcss

Display three images with titles in a row using CSS

I'm trying to align 3 figures with captions horizontally in the middle of the page, side by side, but so far I've only been able to do it vertically. How can I achieve this using just HTML5 and CSS? This is my current HTML: <div class="r ...

htmlcss

How can I manage the horizontal scrolling in a large, expansive HTML Bootstrap table?

Currently, I am working on a Laravel project and have encountered an issue with a table that is overflowing from the right side. Despite trying various methods for implementing horizontal scroll, none of them seem to be effective in resolving the problem. ...

csslaravelbootstrap-5

Tips for addressing Navbar collision with body content or other pages using CSS

I have successfully created a navigation bar using CSS and JS. The image below illustrates the example of my navigation bar: https://i.sstatic.net/2l4gj.png The issue I am facing is that when I select "MY ACCOUNT," it displays some content. However, upon ...

javascripthtmlcss

Struggling with extracting and transferring data from a span tag to another field within the same form using selenium and python

I am struggling with an issue while running a code using selenium in Python. I am trying to extract values from span tags and store them in variables named "cap1, cap2, and cap3." After saving these values, I need to input them into another field on a web ...

pythonhtmlseleniumselenium-webdrivertags

Place the center and bottom divs within the parent div

Trying to center and fix a div at the bottom of another div has proven challenging for me. I've attempted using the following code snippet, but without success. Can anyone guide me on how to achieve this? #clockPosition { margin: auto auto 0 auto ...

htmlcss

Difficulty viewing image in Firefox using HTML <img> tag

I'm encountering an issue with rendering an img tag in an HTML page. The img source is a file located on a remote server. Surprisingly, when attempting to display the image in Firefox using: file://///server/folder1/folder2/name.jpg it shows up prop ...

htmlimage

jQuery for Dynamic CSS Class

Is there a way to apply a different style to a link upon page load with jQuery? I would like the link to appear highlighted when the user navigates to a specific page, such as clicking on the About Us menu item. I want to use jQuery to achieve this effect. ...

phpjqueryhtmlcss

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

Encountering an issue with html2canvas: receiving an error message stating "object

To print the div using Javascript, I encountered an issue with the generated barcode not appearing in the printed page. This led me to use the html2canvas approach to 'render' the div before printing it out. Here is the code snippet: HTML: < ...

javascriptphphtmlhtml2canvas

Is there a way to simultaneously apply underline and color to specific portions of text in a TextView?

Currently, I'm facing an issue with a string in my EditText that contains an URL link. I want to make this link stand out more by adding an underline and changing its color to blue. However, I am able to add the underline using the "u" tag and Html.f ...

androidhtmlfontscolorstextview

Customize the default styles for Angular 2/4 Material's "md-menu" component

Seeking to customize default styles of md-menu in Angular Material. The challenge lies in the dynamic generation of elements by Angular Material, preventing direct access from HTML. Visual representation of DOM: https://i.sstatic.net/v8GE0.png Component ...

javascriptcssangularangular-materialangular-material2

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

javascripthtmlfirebasefirebase-authentication

Tips for restricting text within a div container

Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using ...

htmlcssdjangobootstrap-4

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...

htmlangularspring-bootrxjs

Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears corre ...

htmlcsslocalizationfont-facenumber-formatting