Ways to align a group of rows in the center of a document

I'm struggling to center these rows in the middle of the page. Using a Bootstrap template, I've been customizing it to suit my webpage. https://i.sstatic.net/E9hHq.png I want the rows to be centered just like the text above them. Originally a checkout form example, I removed the items on the right of the rows.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-md-8 order-md-1">
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">First name</label>
            <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid first name is required.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid last name is required.
            </div>
          </div>
        </div>      

        <div class="row">
            <div class="col-md-5 mb-3">
            <label for="birthmonth">Birthday</label>
            <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid month.
            </div>
          </div>

          <div class="col-md-4 mb-3">
            <label for="zip">Day</label>
            <input type="text" class="form-control" id="birthday" placeholder="" required>
            <div class="invalid-feedback">
              Day is required.
            </div>

          </div>
          <div class="col-md-3 mb-3">
            <label for="birthyear">Year</label>
            <input type="text" class="form-control" id="birthyear" placeholder="" required>
            <div class="invalid-feedback">
              Year is required.
            </div>
          </div>
        </div>

        <div class="mb-3">
            <label for="country">University</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid university.
            </div>
          </div>

        <div class="row">
          <div class="col-md-5 mb-3">
            <label for="country">Country</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid country.
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="state">State</label>
            <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
            <div class="invalid-feedback">
              Please provide a valid state.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="zip">Zip</label>
            <input type="text" class="form-control" id="zip" placeholder="" required>
            <div class="invalid-feedback">
              Zip code required.
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="email">Password</label>
          <input type="email" class="form-control" id="Password" placeholder="Password">
          <div class="invalid-feedback">
            Please enter a valid email address for shipping updates.
          </div>
        </div>

        <div class="mb-3">
          <label for="address">Repeat Password</label>
          <input type="text" class="form-control" id="Password" placeholder="Password" required>
          <div class="invalid-feedback">
            Please enter the same password.
          </div>
        </div>

        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>

htmlcssbootstrap-4

Answer №1

As mentioned by @Klooven, the issue can be resolved by including justify-content-center.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8 order-md-1">
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">First name</label>
          <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
          <div class="invalid-feedback">
            Valid first name is required.
          </div>
        </div>
        <div class="col-md-6 mb-3">
          <label for="lastName">Last name</label>
          <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
          <div class="invalid-feedback">
            Valid last name is required.
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-5 mb-3">
          <label for="birthmonth">Birthday</label>
          <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          <div class="invalid-feedback">
            Please select a valid month.
          </div>
        </div>

        <div class="col-md-4 mb-3">
          <label for="zip">Day</label>
          <input type="text" class="form-control" id="birthday" placeholder="" required>
          <div class="invalid-feedback">
            Day is required.
          </div>

        </div>
        <div class="col-md-3 mb-3">
          <label for="birthyear">Year</label>
          <input type="text" class="form-control" id="birthyear" placeholder="" required>
          <div class="invalid-feedback">
            Year is required.
          </div>
        </div>
      </div>

      <div class="mb-3">
        <label for="country">University</label>
        <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
        <div class="invalid-feedback">
          Please select a valid university.
        </div>
      </div>

      <div class="row">
        <div class="col-md-5 mb-3">
          <label for="country">Country</label>
          <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
          <div class="invalid-feedback">
            Please select a valid country.
          </div>
        </div>
        <div class="col-md-4 mb-3">
          <label for="state">State</label>
          <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
          <div class="invalid-feedback">
            Please provide a valid state.
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="zip">Zip</label>
          <input type="text" class="form-control" id="zip" placeholder="" required>
          <div class="invalid-feedback">
            Zip code required.
          </div>
        </div>
      </div>

      <div class="mb-3">
        <label for="email">Password</label>
        <input type="email" class="form-control" id="Password" placeholder="Password">
        <div class="invalid-feedback">
          Please enter a valid email address for shipping updates.
        </div>
      </div>

      <div class="mb-3">
        <label for="address">Repeat Password</label>
        <input type="text" class="form-control" id="Password" placeholder="Password" required>
        <div class="invalid-feedback">
          Please enter the same password.
        </div>
      </div>

      <hr class="mb-4">
      <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>
  </div>
</div>

Answer №2

Implement margin: 0 auto; within this section

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row ">
 <div class="col-md-8 col-offset-md-2 order-md-1" style="margin:0 auto">
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName">First name</label>
            <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid first name is required.
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
            <div class="invalid-feedback">
              Valid last name is required.
            </div>
          </div>
        </div>      

        <div class="row">
            <div class="col-md-5 mb-3">
            <label for="birthmonth">Birthday</label>
            <select class="custom-select d-block w-100" id="birthmonth" required>
              <option value="">Month</option>
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid month.
            </div>
          </div>

          <div class="col-md-4 mb-3">
            <label for="zip">Day</label>
            <input type="text" class="form-control" id="birthday" placeholder="" required>
            <div class="invalid-feedback">
              Day is required.
            </div>

          </div>
          <div class="col-md-3 mb-3">
            <label for="birthyear">Year</label>
            <input type="text" class="form-control" id="birthyear" placeholder="" required>
            <div class="invalid-feedback">
              Year is required.
            </div>
          </div>
        </div>

        <div class="mb-3">
            <label for="country">University</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>UC Berkeley</option>
              <option>UC Davis</option>
              <option>UC Irvine</option>
              <option>UCLA</option>
              <option>UC Riverside</option>
              <option>UC San Francisco</option>
              <option>UC Santa Barbara</option>
              <option>UC Santa Cruz</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid university.
            </div>
          </div>

        <div class="row">
          <div class="col-md-5 mb-3">
            <label for="country">Country</label>
            <select class="custom-select d-block w-100" id="country" required>
              <option value="">Choose...</option>
              <option>United States</option>
            </select>
            <div class="invalid-feedback">
              Please select a valid country.
            </div>
          </div>
          <div class="col-md-4 mb-3">
            <label for="state">State</label>
            <select class="custom-select d-block w-100" id="state" required>
              <option value="">Choose...</option>
              <option>California</option>
            </select>
            <div class="invalid-feedback">
              Please provide a valid state.
            </div>
          </div>
          <div class="col-md-3 mb-3">
            <label for="zip">Zip</label>
            <input type="text" class="form-control" id="zip" placeholder="" required>
            <div class="invalid-feedback">
              Zip code required.
            </div>
          </div>
        </div>

        <div class="mb-3">
          <label for="email">Password</label>
          <input type="email" class="form-control" id="Password" placeholder="Password">
          <div class="invalid-feedback">
            Please enter a valid email address for shipping updates.
          </div>
        </div>

        <div class="mb-3">
          <label for="address">Repeat Password</label>
          <input type="text" class="form-control" id="Password" placeholder="Password" required>
          <div class="invalid-feedback">
            Please enter the same password.
          </div>
        </div>

        <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
    </div>
  </div>
  </div>
</body>
</html>

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

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

htmlcssiosangularangular-material

A unique CSS transition effect applied after toggling a class

Greetings everyone I recently created this code pen https://codepen.io/alexyap/full/MmYvLw/. I am facing a challenge with my navigation menu. The transition in works perfectly, but the fade-out effect looks terrible. I'm struggling to figure out this ...

jquerycsscss-transitions

How can I extract data from HTML popup tables and charts using Python?

Currently, I am in the process of gathering data from for a machine learning project related to MMA. Specifically, my goal is to extract the DraftKings opening odds for each fighter by accessing the odds listed under the DraftKings column. By clicking on ...

pythonhtmlweb-scrapingbeautifulsouppopupwindow

Extracting information from a database (HTML, JavaScript)

I am currently working on a table that receives data from the server using ajax: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +d ...

javascriptjqueryhtmlajaxjson

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

I have created a simple Bootstrap website in HTML that resembles a news feed. To populate the feed with various posts, I am using Javascript to work with arrays containing images, headlines, and captions for each post. My initial approach involves looping ...

javascripthtmlbootstrap-4feed

Tips for streamlining JavaScript for repetitive event listeners on buttons?

As a beginner in coding, I have been diving into learning about buttons and event handlers. When faced with 50 buttons, I find myself concerned about the potential repetition and clutter in my code. Is there a simpler way to manage all the listed event han ...

javascripthtml

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

Textview is cluttering space with Html.fromhtml that is not needed

Situation 1 Here is the code I used to display HTML-formatted text in a TextView. However, it seems to be reserving space for a link that isn't visible. holder.textView.setMovementMethod(LinkMovementMethod.getInstance()); holder.textView.setText(Htm ...

androidhtmlandroid-layout

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

javascripthtmljquery

What is the best way to transform a CSS tab UI into a navigation bar?

Looking to transform these tabs into a fixed Bootstrap navigation bar at the bottom. Despite my efforts, they remain fixed at the top. How can I achieve this layout with the elements at my disposal? Thank you. You can view the incorrect page here. Tab "One ...

javascripthtmlcsstwitter-bootstrap

Eliminating border styles alters the overall appearance of the page

I'm encountering an issue with my HTML/CSS code here: CSS * { padding: 0; margin: 0; border: none; outline: none; } #container { margin: 10px auto 10px auto; width: 960px; background-color: #dddddd; border: solid 1px black; } #contai ...

htmlcss

The alignment of text in the btn-check label of Bootstrap is not centered

My checkboxes with btn-check have labels of varying lengths. I want all the labels to be aligned in the middle, but I can't figure out how to do it. The screenshot below illustrates the issue with the first checkbox. The content is not centered in the ...

htmlcsstwitter-bootstrapbootstrap-5

What in the world is going on with this code snippet? I'm completely stumped on how to fix this problem

Attempting to generate a custom element with unique properties function y(){ var g=document.createElement("div"); this.label="elephant"; return g; } y.prototype.customFunction=function(){ alert(arguments[0]+this.label); }; var b=new y(); b ...

javascripthtmlcustom-attributes

Adjusting transparency on various DIV elements

Currently, I am working on implementing the 'OnClick' functionality in jQuery. The goal is to have only the parent div and its child divs displayed when we click on the parent div property, while fading out all other divs. Below you can find the ...

jquerycsshtml

The deactivation of breakpoints within the Bootstrap 4 grid system

I am currently working on the frontend of a web application that utilizes Bootstrap 4 alpha 6 as its framework. This app is intended for screens that are around 960px wide or larger. Therefore, I aim to restrict the use of Bootstrap grid breakpoints to -l ...

bootstrap-4twitter-bootstrap-4

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

htmlcss

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

Count the number of checkboxes in a div

In my current project, I am working on incorporating three div elements with multiple checkboxes in each one. Successfully, I have managed to implement a counter that tracks the number of checkboxes selected within individual divs. However, I now aspire to ...

javascripthtmlangularcounter

Deactivate hand icon while cursor is placed on a hyperlink

Is there a way to remove the hand symbol that appears when hovering over hyperlinks? I only want the regular mouse cursor to show when hovering over links, not the hand symbol. ...

htmlcss

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml