Excessive padding on labels and insufficient padding on input fields in Bootstrap 4 mobile view

Having a simple password field using Bootstrap grid classes:

<div class="container">
  <div class="row">
    <label class="col-sm-2" for="passwordField">Password</label>
    <input class="col-sm-3" id="passwordField" type="password" v-model="password"/>
    <button class="col-sm-3">Login</button>
  </div>
</div>

Noticing that in mobile view, the left space at the label "Password" is larger than the left space at the input field: https://i.sstatic.net/7nYwz.png

This layout issue might not look too great. Is there a way to improve this without adding extra CSS, or is it a Bootstrap quirk?!

Check it out here: https://jsfiddle.net/0tkco9ws/1/

htmlcssbootstrap-4

Answer №1

This is not a bug or a feature specific to bootstrap. The issue here is due to padding, causing the content to be displayed on the same line in laptop view. However, the problem arises when switching to mobile view as the padding causes the content to no longer be on the same line. To resolve this, you can apply the p-0 class to the label element. By doing so, the padding will be removed, ensuring the content displays correctly.

Answer №2

Reminder to self: always refer to the documentation.

For more information, visit https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form

A more effective method would be:

<div class="container">
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="passwordField">Password</label>
    <div class="col-sm-4">
      <input type="password" class="form-control" id="passwordField"/>
    </div>
    <div class="col-sm-2">
      <button class="form-control my-2 my-sm-0">Login</button>
    </div>
  </div>
</div>

Take a look at the updated JSFiddle link: https://jsfiddle.net/bvnqa58u/

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

Arranging rows and columns in Bootstrap 3 for small screens

My layout is structured as follows: <div class="container"> <div class="row"> <div class="col-md-8> <div class="row"> <div class="col-md-12"> box 1 & ...

csstwitter-bootstrap

Fully responsive header designed for optimal experience at any screen height

I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should sho ...

javascripthtmlcsstwitter-bootstrap

Which terms are acceptable for meta tag titles?

During my studies on w3school, I came across a page that mentioned only the following values are valid: application-name author description generator keywords http://www.w3schools.com/tags/tag_meta.asp However, upon further exploration of webs ...

htmlmeta-tags

What is the best way to extract a piece of text and incorporate it onto my website?

I'm currently attempting to extract the URL from a page on Steam. My goal is to obtain the picture URL of any user who visits it. Here is the JSON code provided by Steam when requesting a user's information: { "response": { "players": [ ...

htmljsonsteamsteam-web-api

Answer for background picture when reducing magnification

Currently, I am facing the challenge of converting a PSD template to HTML. Specifically, I need guidance on how to handle the background food images (highlighted in red in the image) when zooming out the browser. The total width is 1300px with a container ...

htmlcss

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...

jqueryhtmlcss

Troubleshooting the issue of autoplay not functioning in HTML5 audio

I'm facing a strange issue with my code - the autoplay feature for audio is not working as expected. Typically, whenever I insert this particular piece of code into a website, the music starts playing automatically. However, it seems to be malfunctio ...

javascriptcsshtmlaudio

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

cssangularprimeng

Display custom modals in React that showcase content for a brief moment before the page refreshes

I recently developed a custom modal in React. When the Open button is clicked, showModal is set to true and the modal display changes to block. Conversely, clicking the Close button sets the display to none. However, I noticed a bug where upon refreshing ...

javascriptcssreactjsmodal-dialogreact-modal

I'm currently facing an AttributeError issue, and I'm seeking solutions to resolve it

Currently, I am in the process of developing an eCommerce platform using Django. However, I have encountered an issue when attempting to manipulate the quantity of each product in the cart. The error message displayed is as follows: AttributeError at /orde ...

htmldjango

Implementing a dynamic header image that adjusts its resolution based on the device and pixel density for

After finishing a design in Sketch, I have 3 unique layouts with header images displayed below: https://i.sstatic.net/fG5T3.png To ensure the height is consistent and to crop the image appropriately on different devices, I export the following images fro ...

csssketch-3

Tips for creating JSON using AngularJs to store tabular information

I successfully created an HTML page using AngularJS. <form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() --> <input type="submit" value="Save" class="myButton" name="submit" style="margin: ...

javascripthtmljsonangularjs

The dropdown menu items spill out beyond the confines of the container

I'm currently facing some challenges and struggling to find a solution. Unfortunately, I haven't been able to find any guidance on this issue. Important: To view the output, click on "Run snippet" and make it full screen by clicking on the hamb ...

htmlcsssassbulma

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

javascripthtmljquerycss

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss

Is there a way to adjust the dimensions of individual pictures?

Dealing with a variety of images within a resizing container can be tricky. I have a solution for adjusting each image to a specific size without affecting the others. Currently, the container's CSS is set to resize images based on browser size: .con ...

htmlcss

How can you make an element appear when clicking and then disappear with a second click?

Having a bit of an issue here. When I click on the menu button "x," it triggers an onclick event that opens/displays an element. All good so far. But now, I want to click the same menu button "x" to close that same element, and that's where I'm s ...

javascripthtmlcss

Bootstrap Modal - Preselected Dropdown Option

When using Bootstrap Modal, I am encountering an issue where the default option is not being displayed correctly. Instead of "Please Select" appearing as the default choice in the drop-down, it is showing up as "A" by default. Below is the HTML code snip ...

angularbootstrap-4bootstrap-modal

Use Html.ActionLink to trigger events in various sections of the code

I'm attempting to create an ActionLink that will trigger an action in a different section of the code. Here is what I have so far: <div class="col-md-4"> @Html.ActionLink("Click to Perform Action", "Action", "SomeController") </div> ...

htmlasp.net

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas