Having trouble displaying labels alongside inputs in Bootstrap 5.1.3

<form>
  <div class="row mb-3">
    <label for="name" class="col-sm2 col-form-label col-form-label-sm">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" id="name" required>
    </div>
</form>

Although it may appear straightforward, I am struggling to make a label display correctly next to an input element. Instead of being positioned alongside the input field, the label consistently shows up above it. This occurs even when utilizing the code example provided on bootstrap.com.

To view the exact example I'm referring to, visit: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form

Running Bootstrap version 5.1.3

htmlcssbootstrap-5

Answer №1

Make sure to include the class col-sm-2 instead of col-sm2

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46272a2a31363137243505706b756b77">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <form>
      <div class="row mb-3">
        <label for="name" class="col-sm-2 col-form-label col-form-label-sm">Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm" id="name" required />
        </div>
      </div>
    </form>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3d312c3b1e6c7067706c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26263d3a3d3b2839097c6779677b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </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

How do I resize an image to fit perfectly within the viewport dimensions?

As a beginner in Bootstrap and CSS, I am working on creating a home screen layout for my website. My goal is to ensure that the image with an intrinsic size of 1920x1080 fits perfectly within the viewport. Currently, part of the image extends off the scree ...

htmlcssbootstrap-5

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

androidhtmlgoogle-mapsdriving-directions

Include chosen select option in Jquery form submission

Facing some challenges with a section of my code. Essentially, new elements are dynamically added to the page using .html() and ajax response. You can see an example of the added elements in the code. Since the elements were inserted into the page using . ...

javascriptjqueryhtmlajaxforms

The <main> element is not inheriting the height of its parent

https://i.sstatic.net/PchVf.png Using Chrome DevTools, I removed unnecessary elements from the DOM. The body is set to relative and takes up all available space in the document, which is exactly what I want. https://i.sstatic.net/AzELV.png My toolbar i ...

htmlcss

Converting a selection of checkboxes from HTML to PHP code

Having trouble passing multiple checkbox values from HTML to PHP. Here is the test.php : <!DOCTYPE html> <html lang="fr"> <meta charset="utf-8"> <head> <title>Test Multi CheckBox</title> </head&g ...

phphtml.htaccessurl

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout Tel:4949494949 social media icons In the center, I want to display contact information and on the right side, my social media icons. However, ...

htmlcssnavbar

Ways to showcase a numeric value retrieved from an API on my webpage?

Greetings, esteemed guest! You are visitor number <span id=VisitorCounter></span> <script> fetch("https://unique-api-source.com/visits/getvisitorcount", { method: "GET", // mode: "cors", headers: { ...

javascripthtml

How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...

cssreactjsmaterial-ui

Do not assign value 0xxxxxx to the input text field - Jquery

My question is related to the following input: <input type="text"/> I am setting the value for this input as shown below: $('#input-text').val(012345); However, when I view the input it displays "12345" instead of "012345". What happene ...

javascriptjqueryhtml

prevent the container from occupying any additional available space

I'm currently working on a project that aims to replicate the functionality demonstrated in this code snippet: .overall-container { height: screen; border: 1px solid black; padding: 2px; } .scroll-menu { overflow-y: auto; border: 1px sol ...

htmlcss

Error message: "wp is not defined" appears when using TinyMCE, Bootstrap Modal, and URL Parameter together

Currently utilizing Bootstrap 5 alongside WordPress 6.2 In the process of developing a WordPress plugin, where I have successfully created a Dashboard and an All Content page. On the Dashboard page, users can find a list of the most recently created cont ...

javascriptphpwordpresstinymcebootstrap-5

Every time I attempt to load the table, I encounter an error

Encountering errors when attempting to load the table: 'Uncaught ReferenceError: usersArray is not defined at loadUsers (trgames.js:20:17) at trgames.js:22:1' and 'Uncaught TypeError: Cannot set properties of null (setting ...

javascripthtmlajax

Is there a way to make a div stay fixed at the bottom of the screen while allowing the middle content to scroll?

I am seeking a way to create a sticky footer that remains visible and anchored at the bottom of the screen, while allowing the middle content to scroll as new content is added. The method I have implemented for achieving this effect is as follows: /* Re ...

htmlcss

Could Flexbox CSS be used to create a responsive layout like this?

Appreciate your help in advance. I am facing a challenge with the current layout. <article> <section class="content">1</section> <aside class="ads">2</aside> <section class="comments">3</section> < ...

htmlcsslayoutresponsive-designflexbox

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

javascripthtmljquerybootstrap-4

Codignator does not attach the array elements together

While building a registration form for my website, I encountered an issue with passing single element values into an array in CodeIgniter. The values are not being passed correctly, resulting in an error message about an empty alert. How can I resolve th ...

htmlcssarrays

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

htmlcssbootstrap-4asp.net-core-2.0

Instructions for utilizing float:left and list-style-type within HTML are as follows: I am currently experiencing issues with implementing the float:left and list-style-type properties in my code

I'm attempting to align a button list to the left using the float: left property and also remove list styles, but for some reason it's not working as expected. //CSS #tus{margin:5px;padding:0;width:640px;height:auto;} #tus ul{margin:0px;padding: ...

javascripthtmlcss

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

javascripthtml

The offcanvas close button fails to function if initialized through JavaScript

I have integrated offcanvas into the page layout. By default, it remains hidden but I want it to be visible at all times on large screens. On smaller screens, there should be a button to dismiss it, as well as another button in the menu panel to show the o ...

javascriptpythondjangobootstrap-5off-canvas-menu