displaying columns side by side on mobile using bootstrap

I am currently using a horizontal form to display the label on the left side in a row. For mobile devices, I would like the label to take up one row and have the three textboxes remain on the same row. How can I achieve this layout? The textboxes will still stack on top of each other.

<div class="row">
    <div class="col-sm-12">
        <div class="form-group row">
            <label for="dobDay" class="col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
                                
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobDay" placeholder="DD">
            </div>
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobMonth" placeholder="MM">
            </div>
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobYear" placeholder="AAAA">
            </div>
        </div>
     </div>
</div>
htmlcssbootstrap-4

Answer №1

To achieve equal width columns, you can make use of the equal-width class .col:

<div class="form-group row">
    <label for="dobDay" class="col-12 col-md col-form-label" />
    <div class="col">
        <input />
    </div>
    <div class="col">
        <input />
    </div>
    <div class="col">
        <input />
    </div>
</div>

The Date of Birth label has been set as col-12 to occupy a whole row on extra small devices (less than 576px). The other 3 columns have been assigned with col, ensuring they share equal width on a separate row, creating an effect similar to col-sm-4.

For medium-sized devices and above, the Date of Birth label will also be part of the equal-width group with the col-md class, resulting in a layout resembling col-md-3.

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

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

Check out a demo here: https://jsfiddle.net/davidliang2008/yr5gp6kq/8/

Answer №2

The issue of stacking occurred because you forgot to specify breakpoints for xs devices.

<div class="row">
    <div class="col-sm-12">
        <div class="form-group row">
            <label for="dobDay" class="col-xs-12 col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
            
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobDay" placeholder="DD">
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobMonth" placeholder="MM">
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobYear" placeholder="AAAA">
            </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

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

I am facing an issue with aligning two links (one text and one image) to the right and ensuring that the bottom of each is vertically aligned. Currently, they appear like this: (vertically aligned with each others' tops) Here's the relevant HT ...

htmlcsstwitter-bootstrapcss-floatvertical-alignment

Adjust the color of the text within a div element when hovering over and moving the mouse away

Is there a way to change the text color on mouse hover and mouse out, even with multiple nested div elements? I'm having trouble getting it to work, so any help would be appreciated. <div class="u860" id="u860" style="top: 0px;"> <div id ...

jqueryhtmlcss

Bootstrap dropdown menu with Javascript List group

<div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false"> Sort <s ...

javascriptdrop-down-menubootstrap-4

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

csshtmlcenter

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

Is there a way to split each foreach value into distinct variables?

I am looking to assign different variables to foreach values. I have fetched data from an API in JSON format, and then echoed those values using a foreach loop. My goal is to display the echoed value in an input box using JavaScript. I attempted the follow ...

javascriptphphtml

Safari is struggling with the backface visibility feature not functioning as expected

I have implemented a cssflip animation in my code where the element rotates on hover. I included transition and backface-visibilty properties. While it works well on Chrome, I faced issues with Safari. I even added the webkit prefix for Safari browser. `. ...

javascripthtmlcsssafari

What is the best way to use Vue to dynamically generate several bootstrap cards?

Utilizing Bootstrap cards with Vue dynamically is my goal. By using Bootstrap Vue, I am able to generate a card as shown below: <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top> <b-card-text> ...

vue.jsbootstrap-4

Webhost sending information to Windows sidebar gadget

Is there a way to showcase a list of information from a web host on a Windows sidebar gadget without using iframes? I've heard about using JavaScript AJAX (XmlHttpRequest) for this purpose, along with a refreshing function. Can anyone provide some gui ...

javascripthtmlcssajaxxmlhttprequest

Attempting to create a discord bot using Selenium in Python for seamless integration

I am currently attempting to create a Discord bot using Selenium in Python. I have been working on the script to connect the bot to my discord account. Below are the required imports: from selenium import webdriver from selenium.webdriver.common.keys imp ...

pythonhtmlseleniumweb-scrapingbots

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

javascripthtmlcss

Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...

javascriptjqueryhtmlcss

What causes certain content to be inaccessible when using Safari?

When I visit this page using Safari or my iPhone, the list of social network members does not appear. Can anyone explain why this might be happening? I am unable to figure out the reason behind this issue. Thank you in advance for your help! ...

htmlcsswordpresssafaribuddypress

Using jQuery with AJAX to transfer data and store it within PHP

Hello! I am looking for assistance in sending or retrieving data from a form using jQuery and AJAX to transfer the data to a PHP page for database storage. Any guidance on how to achieve this using jQuery and AJAX would be greatly appreciated. Thank you! ...

phpjqueryhtmlajax

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

When it comes to building applications, Bootstrap functions differently with React.js (springboot API) compared to other frameworks

After successfully developing my API that works flawlessly in a local environment, I faced challenges getting it to run smoothly on a server and Heroku. Interestingly, Bootstrap functions perfectly when using "npm start" in VSC, but after running "npm run ...

reactjsspring-bootbootstrap-4

Dropped down list failing to display JSON data

I created a website where users can easily update their wifi passwords. The important information is stored in the file data/data.json, which includes details like room number, AP name, and password. [ {"Room": "room 1", "AP nam ...

javascripthtmljson

Tips for modifying the value and refreshing the array

I retrieve data from $scope.roleinfo = {"QA":[{"White Box Testing":0},{"Black Box Testing":0}],"Development":[{"Server Side":0},{"UI":0},{"Back end":0}]}; Then, I present these values in a table. Now, I need to update the maxcount and create an array w ...

htmlangularjs

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...

javascriptcsshtmloverflow