What is the best way to resize a Bootstrap 4 form to perfectly fit the screen width in mobile view?

I need help with a Bootstrap 4 form that I want to adjust to fit the viewport of mobile users.

Currently, mobile users see this:

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

The form inputs do not fill the width of the screen, and I want them to take up the full width.

In the head, I have set the viewport like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

I have also tried this:

@media screen and (max-width: 360px) {
  form-row col-xs-6 {
    width: 100% !important; 
  }
}

However, it has not worked. Any assistance would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

implement the following elements inside the container

<div class="container">
    <div class="row">
    <div class="form-group col-md-6">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group col-md-6">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </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

I am encountering issues with my XPath in certain scenarios

When attempting to do an assertion with the total of a dynamic table, I am encountering difficulties writing XPath that works for all scenarios. The issue arises because the table sometimes contains only 1 image and other times it may contain 5 images. In ...

htmlcssseleniumxpath

Failure to load a picture does not trigger onError in the onLoad function

Is there a way to ensure that an image always loads, even if the initial load fails? I have tried using the following code snippet: <img class="small" src="VTVFile4.jpg" onload="this.onload=null; this.src='VTVFile4.jpg?' + new Date();" alt=" ...

javascriptjqueryhtml

Can you tell me the standard font size in Internet Explorer 9?

After examining this particular website, I found the default styling used by IE 9. The body selector in particular appears as follows: body { display: block; margin: 8px; zoom: 1; } I would have expected a font-size declaration in this code, but su ...

htmlcssinternet-explorerinternet-explorer-9

What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...

cssmedia-queries

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...

cssangularsass

Incorporate clickable selection buttons into an HTML layout without disrupting the placement of existing

I have set up an HTML document that features a collection of buttons enclosed within a DIV id labeled 'buttons'. My objective is to introduce a sort by button into the mix without disrupting the current layout. I attempted to achieve this goal by ...

htmlcssbuttonselect

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

I am attempting to develop a Miles Per Gallon (MPG) calculator using Javascript. However, I'm encountering difficulties with displaying the results once the "Calculate" button is pressed. <html> <head> <title> MPG Calculator </ti ...

javascripthtmlcss

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

javascriptjqueryhtmlcssimage

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Exploring the internet using a specific font style and ensuring a

I am facing an issue with the fonts on my website. They work perfectly in all browsers when using http, but as soon as I switch to https, the fonts stop working in IE8 and lower versions. However, they do display correctly in ie9. When trying to access th ...

cssiis-7

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

htmlcss

The search and sorting functionality in jquery DataTables is malfunctioning

I am facing difficulties with sorting and filtering the datatable as none of the JS functions seem to be working properly. I have already included the necessary JS files. Here are some details: I am connecting to a database to retrieve data in JSON format. ...

javascriptjqueryajaxhtmldatatable

glsify - encountering the error message 'This file type could require a specific loader to be handled'?

Currently, I'm attempting to implement a custom shader following the guidance provided at https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/. I have imported the .frag and .vert files (provided in the link) and replicated the ...

javascripthtmlthree.jsfragment-shadervertex-shader

A guide to filling an irregular shape (such as a star) based on a percentage using CSS in a React project

I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...

cssreactjsmaterial-uifont-awesome

Need to transfer a variable from the left side to the right side within Javascript. The instructor demonstrated using up and down as an

Recently started learning JavaScript as part of my college game programming course. I am only using Notepad for coding. Currently, I am trying to move an object (in this case, just the letter "o") from left to right on the screen. My professor has provided ...

javascripthtml

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

css

Modifying HTML Class Names

While engaging in web scraping, I encountered a frustrating NoSuchElement error popping up once every 2 or 3 successful attempts. This was happening even though I knew the element I was looking for was always present. It was a product's name stored in ...

pythonhtmlweb-scrapingweb-deployment

How to prevent the navbar-collapse feature from activating within a Bootstrap 4 container

Hello, I am seeking a way to deactivate the collapsible feature in the navbar of Bootstrap 4. I would like the navbar to occupy the entire width, while the content inside, restricted by the container class, maintains the default width. I attempted to achi ...

twitter-bootstrapbootstrap-4

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

javascripthtml