How can I stop the form label from aligning to the right in Bootstrap 4?

I have encountered a formatting issue with my Bootstrap 4 form. The label for "Number of Travellers" is currently aligned to the right, which disrupts the overall look of the form and makes the label appear out of place.

Below is the snippet of the code in question:

<div class="form-row col-xs-6">
                    <div class="form-group col-md-6">
                      <label for="travelFrom">Travelling from:</label>
                      <input class="form-control" type="text" placeholder="Singapore" readonly>
                    </div>
                    <div class="form-group col-md-6">
                      <label for="travelTo">Travelling to:</label>
                      <select class="form-control" id="to">
                        <option>Indonesia</option>
                        <option>Malaysia</option>
                        <option>Thailand</option>
                        <option>Hong Kong</option>
                        <option>South Korea</option>
                        <option>Japan</option>
                        <option>Maldives</option>
                        <option>Others</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label>Number of Travellers:</label>
                      <input type="number" class="form-control" placeholder="Enter the number of travellers">
                    </div>
                    <a href="https://m.me/weekendgowheresg" class="fb-msg-btn" target="_blank"><img src="https://cdn.snaptravel.com/facebook-messenger-white.svg" style="width:30px;height:30px" alt="Facebook Messenger logo">Get Deal on Messenger</a>
                    <a href="https://wa.me/93900052" class="wa-msg-btn" target="_blank"><img src="images/whatsapp.svg" style="width:30px;height:30px" alt="WhatsApp logo">Get Deal on WhatsApp</a>
                </div>

I would like to adjust the layout so that the label, "Number of Travellers," is positioned directly above the input box.

Any assistance in resolving this issue would be greatly appreciated!

For a visual reference, please see the screenshot https://i.sstatic.net/8BxOs.jpg

If you are able to provide guidance or support, please check out the JSFiddle link: https://jsfiddle.net/or7jd8yL/

htmlcssbootstrap-4

Answer №1

Below is an example of how you can create the structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
 
    
    
    <form>
      <div class="form-row form-group">
        <div class="col">
          <label for="travelFrom">Travelling from:</label>
            <input class="form-control" type="text" placeholder="Singapore" readonly>
        </div>
        <div class="col">
        <label>Label</label>
          <select class="form-control" id="to">
                <option>Indonesia</option>
                <option>Malaysia</option>
                <option>Thailand</option>
                <option>Hong Kong</option>
                <option>South Korea</option>
                <option>Japan</option>
                <option>Maldives</option>
                <option>Others</option>
            </select>
        </div>
      </div>
      <div class="form-row form-group">
        <div class="col">
        <label>Number of Travellers:</label>
            <input type="number" class="form-control" placeholder="Enter the number of travellers">
        </div>
        
      </div>
    </form>
    
    
  </form>
</div>

</body>
</html>

I hope this example helps you in creating the structure.

Answer №2

To style the Number of travelers 'form-group', apply the class col-md like this:

<div class="form-group col-md">
    <label>Number of Travellers:</label>
    <input type="number" class="form-control" placeholder="Enter the number of travellers">
</div>

Answer №3

Your use of form-row seems off. It looks like you've only included a partial code block, so I have to make some assumptions. Are you wrapping it with a container or container-fluid? What CSS styles are you using?

If you're using container-fluid, the columns will adjust to the correct size. However, you shouldn't rely too much on Bootstrap to handle the layout, especially if you want the items on different rows.

When I tried your code, the result was as follows:

https://i.sstatic.net/Nny8V.png

As you can see, the number of travelers is squashed and doesn't align with the heading on the right like in your example. This implies that something else in your code is shifting it to the right (perhaps CSS or outer HTML). By adjusting the code to properly use rows and columns, I was able to achieve the intended output, disregarding the CSS for now:

https://i.sstatic.net/v6KTp.png

First, we need to split the screen into two sections: one for the form and one for the image:

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-6'>
            Your form content here
    </div>
    <div class='col-md-6'>
            Cell phone image here
    </div>
  </div>
</div>

The form inside the first column can be structured like this:

<form>
</form>

It should have three rows:

<form>
   <div class="form-row">
   </div>
   <div class="form-row">
   </div>
   <div class="form-row">
   </div>
</form>

Each row will contain form items or form-group items:

<form>
   <div class="form-row">
      <div class="form-group">
          Should be half the size of col 6, with a label and input
      </div>
      <div class="form-group">
          Should be half the size of col 6, with a label and input
      </div>
   </div>
   <div class="form-row">
      <div class="form-group">
          Should take up the full row i.e., col 12, with a label and input
      </div>
   </div>
   <div class="form-row">
      Pattern continues.
   </div>
</form>

Therefore, your code structure should be similar to this:

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-6'>
<form>
  <div class="form-row">
      <div class="form-group col-md-6">
      <label for="travelFrom">Travelling from:</label>
      <input
        class="form-control"
        type="text"
        placeholder="Singapore"
        readonly
      />
    </div>
    <div class="form-group col-md-6">
        <label for="travelTo">Travelling to:</label>
        <select class="form-control" id="to">
          <option>Indonesia</option>
          <option>Malaysia</option>
          <option>Thailand</option>
          <option>Hong Kong</option>
          <option>South Korea</option>
          <option>Japan</option>
          <option>Maldives</option>
          <option>Others</option>
        </select>
    </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <label>Number of Travellers:</label>
            <input
              type="number"
              class="form-control"
              placeholder="Enter the number of travellers"
            />
          </div>
    </div>
    <div class="form-row">
        <a href="https://m.me/weekendgowheresg" class="fb-msg-btn" target="_blank">
          <img src="https://cdn.snaptravel.com/facebook-messenger-white.svg"
          style="width:30px;height:30px"
          alt="Facebook Messenger logo"/>Get Deal on Messenger</a>
      <a href="https://wa.me/93900052" class="wa-msg-btn" target="_blank">
        <img src="images/whatsapp.svg" style="width:30px;height:30px" alt="WhatsApp logo"/>Get Deal on WhatsApp</a>
    </div>
  </form>  
</form> 
    <div class='col-md-6'>
       Cell phone image here
    </div>
  </div>

Keep in mind that this container-fluid will be at the top of the screen, so you may need to adjust it using flex layout or auto margins.

Answer №4

Utilize Bootstrap's .text-left class to left-align text. Apply this class to the form-group container to shift the text to the left rather than keeping it centered (as may be specified in your own CSS).

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

Tips for Keeping Sub Menu Visible Without Having to Click

I am working on an HTML navigation menu that opens submenus on click like this... $("#nav_evnavmenu > li > a").click(function () { // bind onclick if ($(this).parent().hasClass('selected')) { $("#nav_evnavmenu .selected div div ...

javascriptjqueryhtml

Different methods of displaying the next image from a URL without explicitly setting the dimensions

I am attempting to display an image in Next.js without specifying the width and height by using import Image from 'next/image';. It should be noted that the image is sourced from a URL, not a specific folder within the project. <Image si ...

javascriptcssreactjsimagenext.js

Eliminate the .html extension from the URL and initiate a redirect

I need assistance removing the .html extension from URLs that are displayed in the address bar. To achieve this, I used the following code: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f This solution ...

html.htaccesshttp-redirect

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

javascriptjqueryhtmlcss

How can you apply styling to one element when focusing on a different element at separate hierarchy levels?

I'm currently facing a challenge with styling a text field to expand when focused, and adding an "Add" button below it. The issue is that the elements are on different levels in the code structure, making it difficult to show or hide the button when f ...

cssvue.jssass

What's the best way to ensure that your item list automatically updates the rendered list when an item is deleted

I've developed a web cart using Redux. The cart functions as expected, except for one issue - when I delete an item from the cart, the changes are only displayed after refreshing or navigating to another page. How can I update the view dynamically as ...

javascripthtmlreactjsredux

Experience the thrill of success with a timed animation using Sweet Alert on the powerful Ionic framework

I'm currently working with the ionic framework to develop a mobile application. I'd like to incorporate Sweet Alert for displaying success messages. You can find Sweet Alert at . My goal is to include a timer in the success message. swal("Good ...

angularjscssionic-frameworkbootstrappingsweetalert

Decoding JSON with HTML in c#

While serializing an object into JSON that contains HTML, I encountered a unique issue. Below is the structure of my class: [Serializable] public class ProductImportModel { public string ProductName { get; set; } public string ShortDescription { get; ...

c#htmljsonentity-frameworkserialization

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

javascriptjqueryhtmlcss

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

Labels arranged in a fixed width format

Is there a way to ensure that the labels for the inputs are all the same width, creating a more cohesive table-like layout? Imagine it as two columns: one for the labels and one for the inputs. Here is the code I have so far: th, td, table{border: 2px ...

htmlcssinput

Acquiring inner HTML content with PHP

Looking to optimize meta tags for search and open graph. My goal is to dynamically generate the meta description tag by combining content from two specific elements in the HTML. For instance, let's say we have this snippet of code: <div class="r ...

phphtmlinnerhtml

My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Hey there! I'm currently working on my very first webpage and recently added an audio element that is functioning perfectly. The only issue I'm encountering is trying to position the element at the bottom of my page. I've already attempted ...

csshtml

Tooltip positioned within a custom container using Material UI

Currently, as part of my Chrome extension development utilizing React and Material UI, I am implementing an inject page strategy. I have managed to set up a tooltip for the Fab button, but unfortunately, it appears outside the DOM of my extension. Upon ins ...

javascripthtmlreactjsgoogle-chrome-extensionmaterial-ui

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

htmlcssreduceweebly

I'm curious as to why the web browser is showing a timestamp below the image I have on my HTML page

Issue at Hand: I am currently working on coding a website that involves displaying an image. However, when the image is loaded, a timestamp appears underneath it in the web browser. Query: Could you please shed some light on why a timestamp is showing up ...

html

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

javascripthtmlwebviewelectron

What is the best way to create a single column for each item in a foreach loop with bootstrap?

I am working on a web development project for my school where I need to create a Trello-like application. I am having trouble figuring out how to generate one column per element in my foreach loop to display the board with different columns. Any guidance o ...

phphtmlcssbootstrap-4

Having trouble getting the items to show up on the canvas

I have been struggling to implement JavaScript on a canvas in order to display mice in the holes using the mouse coordinates. Despite trying many different methods and spending close to a month on this project, I still can't seem to get it to work acr ...

javascripthtmlcanvas

Are you experiencing font compatibility issues on iOS devices? Is it possible that only certain fonts are not displaying correctly?

Working on a mobile landing page specifically tailored for iPhones, I want to make Rockwell the h1 font on the page. Here is the URL that I am referring to: radionowheremusic.com/mobile7.html Interestingly, when I view the page on my phone, the header fo ...

htmlioscssfonts