Achieving label center alignment within a Bootstrap 4 container

Can anyone help me with centering the labels within the container?

I'm encountering difficulties uploading an image to a website, so I've included a URL link as an alternative.

To prevent the labels from filling the entire fluid container, I've adjusted the width to 50%.

I attempted using text-center, but when changing the width to 50%, the labels defaulted to the left.

Click here for the image

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <section>
      <div class="container-fluid text-center">
        <div class="newsletter p-5">
          <form>
            <h2>Sign up to our newsletter</h2>
            <p>Recieve the lastest news and offers by signing up today.</p>
            <div class="form-group text-center">
              <label for="input-name" class="sr-only">Your Name:</label>
              <input type="text" class="form-control text-center" placeholder="firstname lastname" id="input-name">
            </div>
            <div class="form-group text-center">
              <label for="input-email" class="sr-only">Your Email:</label>
              <input type="email" class="form-control text-center" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78a868e8ba7829f868a978b82c984888a">[email protected]</a>" id="input-email">
            </div>
            <div class="form-check">
              <label class="form-check-label">
                  <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
                  I have read and accept the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a> 
                </label>
            </div>
            <div>
              <small class="form-text">You can unsubscribe from the mailing list at anytime</small>
              <button type="submit" class="m-1 btn btn-dark">SIGN UP</button>
            </div>
          </form>
          <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                </div>
                <div class="modal-body">
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                    blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

htmlcssbootstrap-4

Answer №1

Give this a shot: 

.custom-form {
    width: 50%;
    margin: 0 auto;
    padding: 5px;
}

Answer №2

Give this a shot:

<div class="newsletter p-5">  
  <div class="row">
    <div class="col-12 col-sm-6 offset-sm-6">

       <!-- Insert your form code here --->

    </div>
  </div>
</div>

Additionally, eliminate the 50% width as bootstrap columns will handle it.

Answer №3

encapsulate your form data within the following:

<div class="d-flex justify-content-center">
        <div class="col-md-6 col-lg-5 col-sm-8">
         <form>Enter Your Content Here
        </form>
      </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container-fluid text-center">
  
    <div class="newsletter p-5">
    <div class="d-flex justify-content-center">
    <div class="col-md-6 col-lg-5 col-sm-8">
      <form>
        <h2>Subscribe to our newsletter</h2>
        <p>Stay updated with the latest news and special offers by subscribing now.</p>
        <div class="form-group text-center">
          <label for="input-name" class="sr-only">Your Name:</label>
          <input type="text" class="form-control text-center" placeholder="first last name" id="input-name">
        </div>
        <div class="form-group text-center">
          <label for="input-email" class="sr-only">Your Email:</label>
          <input type="email" class="form-control text-center" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513c30383d113429303c213d347f323e3c">[email protected]</a>" id="input-email">
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input type="checkbox" class="form-check-input" id="input-terms" value="terms">
              I acknowledge and agree with the <a href="#" data-toggle="modal" data-target="#modal"> terms and conditions.</a> 
            </label>
        </div>
        <div>
          <small class="form-text">You are free to unsubscribe from our mailing list anytime!</small>
          <button type="submit" class="m-1 btn btn-dark">SUBSCRIBE NOW</button>
        </div>
      </form>
      </div>
  </div>
      <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalTitle">Terms and Conditions</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec metus mollis, maximus lacus in, laoreet ligula. Etiam metus nisl, eleifend et suscipit id, viverra et lacus. Aenean pulvinar purus leo, a posuere turpis tincidunt non. Etiam
                blandit enim a mauris lobortis, at placerat quam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit velit diam, ut dapibus tellus iaculis vel. Nunc dapibus gravida leo, sit amet mollis orci suscipit non.
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №4

To style the placeholder text in CSS, you can use the following code:

input::placeholder {
   text-align: center;
}

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

Putting off the execution of a setTimeout()

I'm encountering difficulties with a piece of asynchronous JavaScript code designed to fetch values from a database using ajax. The objective is to reload a page once a list has been populated. To achieve this, I attempted to embed the following code ...

javascriptajaxhtml

How can you make the coordinates of the cursor track the cursor when it hovers over a rectangle?

The code provided below will constantly display the cursor's coordinates right below the cursor: function displayCursorCoordinates(e) { var x = event.clientX; var y = event.clientY; var coordinates = "(" + x + ", " + y + ")"; document.getEl ...

javascripthtmlcss

Javascript does not execute properly in Google Apps Script

Encountering issues while attempting to execute the code provided in Google app script. // 1.foldername = Folder name | 3.templateId = ID of the template to use // 2.SheetId = ID of spreadsheet to use. | 4.rootFolder = ID of the root fold ...

javascripthtmlgoogle-apps-scriptgoogle-apps

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

As a beginner in Angular, my goal is to create a feature where: The character count in a label increases as text is entered into a textarea. When the backspace key is pressed, the counter should decrease. If the user attempts to enter more characters tha ...

htmlangular

Adjust the header and menu color as you scroll

Starting fresh with JavaScript, I'm seeking advice on a specific piece of code. Working on a Joomla 3.2 website using the Gantry template by default. My goal is to achieve the following: When a user accesses a submenu (e.g., 01, 02, 03) derived from t ...

jqueryhtmlcss

Is it possible to utilize JavaScript for rotating and cropping a collection of images before uploading them to the gallery?

Struggling to implement file reader and croppie for local image editing (zoom / rotate / crop) before uploading. Seemingly stuck due to a potential DOM issue with the modal, unable to troubleshoot! FileReader () issues // // //create elements for image, ...

javascriptphpjquerybootstrap-4croppie

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

cssregex

Obtaining a worldwide JavaScript variable through AJAX JSON query

Hello, I have encountered an issue while using this code for my AJAX JSON request. When attempting to make jsonObj a global variable and then console.log() it, the debugger console shows that it is always coming up as undefined. To explain my question fur ...

javascripthtmljsonajax

The flexbox container is not displaying properly

I have rows containing two flex divs each. One div displays an image, while the other has text. I'm puzzled as to why some divs display correctly while others have overflowing text. Refreshing the page resolves this issue, but it resurfaces if I clea ...

cssbootstrap-4flexbox

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

I am trying to save two values, one for the h1 tag and one for the body background. I want the user to select color 1 and color 2. When I press the third button, all changes should be applied and the colors should change. I have attempted this but with no ...

javascripthtmlcss

What is the best way to arrange three identical boxes next to each other, all of the same size

Imagine having a container with the following dimensions: .container { width: 960px; margin: 0 auto; height: 500px; } Now, envision wanting to add three boxes in the center aligned horizontally with these specifications: .box1 { background-color ...

htmlcssalignment

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

phpjavascriptjqueryhtmlajax

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

How can I alter the image using the success function in jQuery?

I'm encountering an issue with my jQuery voting script. Everything seems to be working correctly, except for the fact that the image in the success function of the AJAX request is not updating as expected. jQuery: $("a.vote_down").click(function(){ ...

phpjqueryhtmlcssajax

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

phpjqueryhtmlajax

Leveraging Jquery to add an element or text in front of the initial instance of a different element

Here is a sample of my xml code: <entry> <br> <abc></abc> <xyz></xyz> <example></example> <example></example> <example></example> </entry> <entry> <br> <abc>&l ...

javascriptjqueryhtml

In a remarkable design with an array of buttons and an individual div assigned to each, a fascinating functionality unfolds. Whenever a

https://i.stack.imgur.com/emhsT.png When I click on the first "Respond" button, I want the adjacent text box to disappear. Currently, if I click on the first "Respond" button, both text boxes will disappear instead of just the first one. $('.comment ...

jquerycsshtmlhide

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

Issue with text decoration in Html, Css, and Bootstrap

this image shows the issue Hi there, I'm facing an issue with my project involving bootstrap. Whenever I include bootstrap in my project using a link, all "a" tags end up with text decoration. How can I fix this problem? ...

htmlcssbootstrap-5

Chrome causing a background-size cover issue

I encountered an issue with this code. It runs smoothly on Firefox 50, but encounters failures on Chrome Version 54.0.2840.99 m (64-bit) on Windows. .test { background: url(datas/images/3.jpg) no-repeat center center fixed; background-size: cover ...

css