Tips for aligning a row with both text and input fields in the center

I'm working on a design that includes text and input fields in rows, and I want everything to be centered. Should I wrap all the content in a div and center it as a whole, or should I center each row individually? Any suggestions?

Here is the code snippet:

<div class="modal-body">

  <!-- test for NEW CONTENT AREA -->

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">username*</h6>
      <input align="middle" class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">firstname*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
    <div class="col-sm-4">
      <h6 class="section-header">lastname*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">password*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
    <div class="col-sm-4">
      <h6 class="section-header">confirm password*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-sm-4">
      <img src="/img/siloutte.png" align="middle" alt="add image" width="110px" height="80px" />
      <input type="file" name="pic" accept="image/gif, image/jpeg, image/png">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <label for="contact"><span><h5>* required field</h5></span>
      </label>
    </div>
  </div>
</div>

htmlcss

Answer №1

If you're looking to have the fields appear on the same line, here's a solution that might work for you: Link

<div id="block_container">
<div id="block1" style="float:left">
     <h6 class="section-header">First Name*</h6>

    <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true" />
</div>
<div id="bloc2" style="float:right">
     <h6 class="section-header">Last Name*</h6>

    <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true" />
</div>

Answer №2

I found that simply switching from using .col-sm-6 to 4 solved the issue. This adjustment extended the text field and improved its overall appearance.

Answer №3

Does this meet your expectations? Visit site

Here is the CSS code snippet that I included:

.jumbotron {
  padding: 20px;
  text-align: center;    
}

Answer №4

To center an element, you can use min-content to set the width and then apply auto margins to both left and right sides.

.modal-body {
    width: min-content;
    margin: 0 auto;
}
<div class="modal-body">

  <!-- test for NEW CONTENT AREA -->

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">username*</h6>
      <input align="middle" class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">firstname*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
    <div class="col-sm-4">
      <h6 class="section-header">lastname*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <h6 class="section-header">password*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
    <div class="col-sm-4">
      <h6 class="section-header">confirm password*</h6>
      <input class="form-control no-glow" type="text" id="assignment-name" ng-model="assignment.name" ng-required="true">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-sm-4">
      <img src="/img/siloutte.png" align="middle" alt="add image" width="110px" height="80px" />
      <input type="file" name="pic" accept="image/gif, image/jpeg, image/png">
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <label for="contact"><span><h5>* required field</h5></span>
      </label>
    </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

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

javascriptjqueryhtmlcss

"Utilize the inline display property to keep elements hidden

I have created a template named 'aTemplate' using the following code: $.template('aTemplate', '<div id="someid" class="abc">' + .... '</div>' ); My goal is to make this div inline with other ele ...

javascripthtmlinlinehidden

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Currently, I am working on developing my own blog website using Next.js and MD transcriptions. The issue I am facing involves anchor links. All the titles <h1> are being converted into anchor links through the use of the next Link component: <Link ...

javascripthtmlreactjsnext.js

What methods can I use to adjust the selected option according to the value in the database?

To introduce you to my work, I have a table filled with data from a database that functions as a CRUD - Create, Read, Update, Delete table. Within this table, there is a column where EDIT and DELETE buttons are located. Clicking on the EDIT button trigger ...

javascripthtmlajax

What is the best way to reset an event back to its original state once it has been clicked on again

As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to ...

javascriptcssfrontend

Generating replicated elements at varying positions

After discovering that my previous question, which can be found here, is currently not feasible due to limitations with html2canvas only taking 'snapshots', I have chosen to approach the problem differently. The new approach involves making an o ...

javascriptjqueryhtmlcssjquery-ui

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

csshovercss-transitions

Looking to fetch the title, description, and uploaded image all in one row and showcase them using PHP

My contact-form-submission.php file is responsible for inserting form data into a Database and uploading logos to the uploads folder. Here's a snippet of the code: <?php $target_dir = "uploads/"; $target_file = $target_dir . basename($ ...

phphtmlmysqlforms

How can CSS be used to make an element completely move off the visible screen?

Imagine if I had a div that was positioned outside of the visible area of the computer monitor screen. When using CSS transitions to move it to a specific position, it would create an effect of the element slowly moving in from outside of the screen. Add ...

css

Why does the text in a div display in Safari 8.2 and Chrome 39, but not in Firefox 34?

In my HTML document, I have a div tag located within the body like so: <div id="content_text"></div>​ Using javascript, I later set the contents of the div like this: var content_text = document.getElementById("content_text") c ...

javascripthtmlcssfirefox

The combination of AddEventListener in the parent and postMessage in the iframe is ineffective

As I delve into the Stripe documentation to develop a new feature, I have encountered an issue regarding the communication between a webpage and an iframe. The code in index.html: <!DOCTYPE html> <body> parent<br> <iframe src="./ ...

javascripthtmliframestripe-paymentspostmessage

What could be causing my second ajax call to render the page unresponsive?

I am encountering an issue with my AJAX call. It works fine on the first attempt, but when I try to call it a second time, the page becomes unresponsive. I am not sure what is causing this issue. The code is located within the document ready function. The ...

javascripthtmljqueryajaxmaterial-design

Aligning elements vertically in Bootstrap 4 with the power of flexbox

Seeking assistance with a frustrating issue in Bootstrap 4: I tried to implement the align-self-start flexbox alignment using the code from this page . However, the example provided on that page does not seem to work. Is there a simpler way to achieve the ...

twitter-bootstrapcssflexboxbootstrap-4

Tips for capturing the interaction between a jQuery Dialog and its Parent

Within the parent HTML, there is a call that triggers a JavaScript function. <div class="data"> <form:input title="Building" styleClass="content contractorDisable" maxlength="5" size="6" path="fireImpairForm.bldCode" />&nbsp; <a hre ...

javascriptjqueryhtmljsp

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

jqueryhtmlcss

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4

A guide on adding specific rows together in a list

I'm working with a grid that contains various items and I want to calculate the total of the val_itemservico column only for the selected rows, not all of them. How can I achieve this functionality? When the user clicks on the "Calculate" button, I n ...

javascriptpythonhtmldjango

Restricting zooming to only occur within the img element in a UI

Is there a method to enable image zoom inside specific divs without affecting the overall page zoom? At the moment, I have: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale ...

javascripthtmlioscssuiwebview

Using AJAX and Rails to set session variables in the presence of appcache

When making an ajax call to "updateUser," the following code is executed: puts session[:user_id] user = User.find(params[:user_id]) if user session[:user_id] = user.id session[:user_name] = user.first_name + " " + user.last_name puts session[:user_i ...

ruby-on-railsajaxhtmlsessionjquery

What is the proper way to utilize the src attribute for connecting HTML code?

I've noticed that in HTML you can include scripts like this: <script src="myscripts.js"></script> But I was wondering, is it possible to link an entire HTML page? Something like this: <html src="testing.html">< ...

htmlweb