Looking to utilize Bootstrap to create a responsive two-column form design

I have a form with two columns arranged like this on desktop view

|A|B|
|C|D|
|E|F|

However, on mobile, I want it to look like this

|A|
|B|
|C|
|D|
|E|
|F|

Unfortunately, I'm currently seeing

|A|
|C|
|E|
|B|
|D|
|F|

This is the structure of my code:

<div class="row">
    <div class="col-12 col-md-6">
      <input> <!-- A -->
      <input> <!-- C -->
      <input> <!-- D -->
    </div>

    <div class="col-12 col-md-6 ">
      <input> <!-- B -->
      <input> <!-- D -->
      <input> <!-- F -->
    </div>
</div>

Could you please assist me in resolving this issue?

cssformsmobilebootstrap-4responsive

Answer №1

 <section class="container">
    <article class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                Apples
            </div>
            <div class="col-md-6">
                Bananas
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-6">
                Carrots
            </div>
            <div class="col-md-6">
                Dates
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-6">
                Eggplants
            </div>
            <div class="col-md-6">
                Figs
            </div>
        </div>
    </article>
</section>

Answer №2

To enhance your original code, consider assigning a class to each input, or creating a separate div for each input

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
  <div class="col-12 col-md-6">
    A
  </div>
  <div class="col-12 col-md-6">
    B
  </div>
  <div class="col-12 col-md-6">
    C
  </div>
  <div class="col-12 col-md-6">
    D
  </div>
  <div class="col-12 col-md-6">
    E
  </div>
  <div class="col-12 col-md-6">
    F
  </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

Can a results array be formatted into a specified number of columns solely through client-side scripting?

My current challenge involves presenting an array of image links in groups of 8 within multiple rows. Unfortunately, I do not have the ability to adjust this array directly. Is there a way to achieve this desired layout using CSS/HTML or potentially resor ...

javascriptjqueryhtmlcss

Issue with the hamburger menu dropdown color not being applied properly

Greetings to all who are taking the time to review this query! Everything seemed to be going well until I refreshed my code after making numerous changes, and then this issue arose: Dropdown menu lacking color: https://i.sstatic.net/3lz5a.png The color ...

htmlcssresponsive-design

Issues with color scheme in Angular Material 18

While using (ng generate @angular/material:my--own-theme), I came across some code in own-theme.scss. Surprisingly, this code works for the palette included in Angular Material, but I prefer to use my own theme. Here's what was generated and what I di ...

cssangularuser-interfacesassangular-material

Is it possible to have both a Navbar and Sidebar concurrently using Bootstrap?

I have a slightly unconventional request - I want to incorporate the sidebar from along with the navbar-default example from http://getbootstrap.com/components/#nav. What would be the best approach to merge these two elements? Or is there a different pa ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The layout features two full-width columns, with the first column containing a resizable textarea

I am interested in creating an editor that displays code on the left and its result on the right. Why is the text inside <div> #right stuck to the white/blue boundary? Why is there no padding? (I would like a 10px padding). * { margin: 0; padding ...

htmlcss

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

stylized tables with assorted colored categories

Here is the layout of my table: Grade Sign StudentGrade 6 + 1 6 0 6 - 0 5 + 0 5 0 5 - 0 4 + 0 4 0 4 - 1 3 + 0 3 ...

htmlcssbootstrap-4

Can someone provide assistance on how to add an icon to a button?

Help needed with adding icons to buttons! I am new to coding and struggling with adding icons to each button. If any classes need to be changed, please let me know. I am currently learning HTML and CSS and could use some guidance. Thank you! Example: ...

htmlcss

div consistently positioned above fixed element

My goal is straightforward - I have a fixed div at the bottom of my page that always needs to be visible. Inside this div, there are two sub-divs; one small div should always be on top, and the other should be scrollable. The issue lies with the small div ...

javascripthtmlcss

Adding style using CSS to a dynamically generated table row in Vue.js

Currently, I am working with a table that dynamically generates rows using v-for: <table> <tr><th class='name'>Name</th><th>Surname</th></tr> <tr v-for='data in datas'><td class=&a ...

javascriptjqueryhtmlcssvue.js

Mapping data using DataTables and improving table format

I am having some issues with integrating DataTables into Django 2.1. The table appears to be broken, and I am struggling to correctly map the data being sent by the server to JavaScript. https://i.sstatic.net/qv8kl.jpg Here is the JavaScript configuratio ...

ajaxdjangodatatablesbootstrap-4

Utilizing the enter key function for form submissions on lists in AngularJS

In my AngularJS project, I am working on an account details page where users can update their personal information. The interface allows for multiple phone numbers and email addresses to be added. Currently, the functionality works well with mouse input or ...

htmlformsangularjsform-submit

What is the best way to extend a div to fill the full width of a webpage?

I'm struggling to align a div perfectly with the left, right, and top edges of the page. Despite trying various solutions suggested by others, I just can't seem to get it right! Any assistance would be greatly appreciated. Thank you. ...

csshtml

Using CSS to conceal an element when a different element is also invisible

My inquiry is as follows: I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites). Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden. ...

csshideelement

The sass compiler has produced two separate CSS files, but I am only able to link one of them to the index.html file

Everything was going smoothly with my SASS compiler. The styles were reacting perfectly in the live web server. But then, out of nowhere, it stopped working. Upon closer inspection, I realized that the extension had created a new CSS file. Instead of compi ...

csssass

What is the best way to add a color swatch image using Javascript?

I'm facing a challenge in Shopify where I need to assign corresponding background images to color swatches. Currently, my icons are set up with the correct links for each color, but they are missing their respective images, similar to this example. I ...

javascripthtmlcssshopify

Customizing hover effects for select field options

I need help customizing the background color of a dropdown menu when hovered over. I attempted to assign a class "page-limit-option" to the option element, but it didn't work. Should I create a new style component instead of using the option? <sele ...

javascripthtmlcssangular

What advantages does utilizing multiple classes in HTML provide?

Programming is still a new world for me, and I'm struggling to understand the purpose behind using multiple classes in HTML. While it seems like whether we use one class or several, the CSS styles will apply to the same content or text anyway. So why ...

htmlcsscoding-style

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss