Fixing the problem of horizontal labels in Bootstrap - a step-by-step guide

I am struggling to display the form label on a single line, as it currently appears on two lines. Any suggestions for showing the form label in a single line?

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfabb1a9b1ad">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container">
  <h2 class="mt32">Bootstrap 4 Horizontal Form</h2>

  <form class="mt32" action="#">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group row">
          <label for="fname" class="control-label col-sm-2">First Name</label>
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              id="fname"
              placeholder="First name"
            />
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group row">
          <label for="lname" class="control-label col-sm-2">Last Name</label>
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              id="lname"
              placeholder="Last name"
            />
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group row">
          <label for="sportsname" class="control-label col-sm-2">Sports</label>
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              id="sportsname"
              placeholder="Sports name"
            />
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group row">
          <label for="sname" class="control-label col-sm-2">School Name</label>
          <div class="col-sm-10">
            <input
              type="text"
              class="form-control"
              id="sname"
              placeholder="School name"
            />
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f352e2a3a2d261f6c716a716e">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9cdd7cfd7cb">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Demo

Is there a way to have the label name displayed on a single line?

cssbootstrap-4

Answer №1

After some adjustments, the necessary classes have been added in order to achieve the desired outcome:

  1. text-nowrap has been included to prevent text wrapping
  2. align-items-end was applied to vertically center the text with the inputs
  3. Additional/modified .col classes were also incorporated

A more detailed view can be accessed via this link: Stackblitz.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a6bca4bca0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container">
    <h2 class="mt32">Bootstrap 4 Horizontal Form</h2>
    
    <form class="mt32" action="#">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="form-group row align-items-end">
            <label for="fname" class="control-label text-nowrap col-sm-4">First Name</label>
            <div class="col">
              <input
                type="text"
                class="form-control"
                id="fname"
                placeholder="First name"
              />
            </div>
          </div>
        </div>
    
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="form-group row align-items-end">
            <label for="fname" class="control-label text-nowrap col-sm-4">Last Name</label>
            <div class="col">
              <input
                type="text"
                class="form-control"
                id="lname"
                placeholder="Last name"
              />
            </div>
          </div>
        </div>
    
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
          <div class="form-group row align-items-end">
            <label for="fname" class="control-label text-nowrap col-sm-3">Sports</label>
            <div class="col">
              <input
                type="text"
                class="form-control"
                id="sportsname"
                placeholder="Sports name"
              />
            </div>
          </div>
        </div>
    
        <div class="col-lg-3 col-md-5 col-sm-6 col-xs-12">
          <div class="form-group row align-items-end">
            <label for="fname" class="control-label text-nowrap col-sm-5">School Name</label>
            <div class="col">
              <input
                type="text"
                class="form-control"
                id="sname"
                placeholder="Shcool name"
              />
            </div>
          </div>
        </div>
      </div>
    </form>
    </div>    
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b213a3e2e39320b78657e657a">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474001a021a06">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Answer №2

there was an issue with the col-sm-{number}, so you need to update this part of your code:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-2">Last Name</label>
      <div class="col-sm-10">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

replace it with:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">
        Last Name
      </label>
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

I made changes to these lines, ensuring each input and its label match like this:

      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">

      <div class="col-sm-7 pl-0">

Here is your modified code snippet:

<div class="container">
<h2 class="mt32">Bootstrap 4 Horizontal Form</h2>

<form class="mt32" action="#">
<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2">
      First Name</label>
      <div class="col-sm-8 pl-0">
        <input
          type="text"
          class="form-control"
          id="fname"
          placeholder="First name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2">
        Last Name
      </label>
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="lname"
          placeholder="Last name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-4 pl-1 p-0 mt-2"
        >Sports</label
      >
      <div class="col-sm-8 pl-0">
        <input
          type="text"
          class="form-control"
          id="sportsname"
          placeholder="Sports name"
        />
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group row">
      <label for="fname" class="control-label col-sm-5 pl-1 p-0 mt-2"
        >School Name</label
      >
      <div class="col-sm-7 pl-0">
        <input
          type="text"
          class="form-control"
          id="sname"
          placeholder="Shcool name"
        />
      </div>
    </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

Tips for aligning two divs of varying sizes side by side

Imagine having two div elements: <div id="container"> <div id="left">line one</div> <div id="right">line one<br/>line two</div> </div> Is there a way to have the left and right divs align at the bottom li ...

htmlcss

What is the best way to mirror an image using CSS3?

I'm looking to create a minimalist front page for my wife's jewelry website. I envision a simple layout with a blurred background and a sleek title at the top. In the center of the page, there will be several sections dedicated to different types ...

htmlcss

Merging double borders in a div using CSS is essential for creating

Upon examining this sample, it's evident that the borders do not blend together. css: div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; } The number of divs is arbitrary, and only on ...

javascriptjqueryhtmlcss

Creating a loading bar through the animation of a linear-gradient

Creating a loading bar with a single colored element moving along a grey bar is my current project. Unfortunately, I struggle with animating gradients in CSS. I found a solution that seems promising based on this answer: Make some gradient move endlessly ...

css

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

pythonhtmlcsspython-3.xflask

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

javascriptcssjquery-uiautocompleteinternet-explorer-7

What steps can I take to get a border functioning correctly on my website?

For my friend's birthday, I am designing a website that resembles a greeting card. The layout consists of text in the center and an image of a birthday cake. To give it a card-like feel, I want to create a border around it. Although I know how to adju ...

javascripthtmlcssflexboxborder

Swap the contents of a list with a corresponding image

Having trouble replacing text (link) inside a list with an image. Can't seem to get it working Here's my code: HTML: <div id = "headeranna"> <ul> <li><a href="#" id="annaklein">Ask Anna</a></li> ...

htmlcss

the recurring pattern of media conditions in every single column

Hello, I'm currently involved in a project where I have implemented media conditions for my columns using Sass. Here is the code snippet: // Mobile media - 320px width @mixin mobile{ @media only screen and (max-width:767px){ width: 300px; } } B ...

csssass

What is the best way to delete the pipe separator from the initial item in a list on the line?

I have a list of items separated by pipes that spans multiple lines. I am looking to use jQuery to remove the pipe separator for the first item on each line. Example: Red | Green | Blue Purple | Black | White Violet | Yellow | Magenta Here is the code ...

jquerycss

How to incorporate multiple headers with multiple columns in Bootstrap 4?

Working on a form with multiple column headers at the top, each date header must have four columns underneath. To achieve this layout, I have been experimenting within the <thead> section rather than utilizing the <tbody>. My query pertains to ...

twitter-bootstraphtml-tablebootstrap-4

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I am currently developing a fixed horizontal navigation bar that spans the entire width of the screen. However, when I attempt to make its position fixed, the unordered list element only occupies the width required to contain its content. Considering that ...

htmlcss

The CSS3 box-shadow lacks a sense of dimension

I'm having trouble adding depth to a header div using CSS box-shadow. No matter what I try, all I get is a flat line instead of the desired shadow effect. I've experimented with different colors, but nothing seems to work. Any suggestions on how ...

htmlcss

Clickable regions in Internet Explorer 7 that lack a specific width

Is there a way to make the clickable area of links always stretch to the parents container when the parent container does not have a fixed width? For example, check out this JSFiddle. In Firefox, the link stretches with the text and the li tag, but in IE ...

htmlcssinternet-explorer-7

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Creating an intricate table layout using AngularJS and the ngRepeat directive

I'm attempting to create a table similar to the one shown in the image below using HTML5. https://i.sstatic.net/DiPaa.png In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes ( ...

javascripthtmlcssangularjshtml-table

Header becomes distorted while scrolling down, then returns to normal when scrolling back up

Something strange is happening on my client's website. Whenever I scroll down and then back up, the header displays a large white area where the address/contact bar should be. You can see it in action on the site: rijschool-wolvega.nl I'm not w ...

htmlcss

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

Converting HTML to PDF using AngularJS

Can anyone help me with converting HTML to PDF in Angular? I have tried using the angular-save-html-to-pdf package from npm, but encountered errors. Are there any other solutions or custom directives available for this task? ...

htmlcssangularjspdfhtml2pdf

What is the best way to position a tooltip next to a specific item in a list?

I am trying to integrate Bootstrap 4, ClipboardJS, and Tooltips (PopperJS) together. Currently, I have managed to make the functionality work partially: Upon clicking a button, the value stored in the "data-clipboard-text" attribute is copied to the clipb ...

jquerybootstrap-4tooltippopper.jsclipboard.js