Adjust the Bootstrap design from an inline format to a grid layout specifically for mobile devices

I have a complex web form with multiple fields in a single line. The Bootstrap inline form works well on larger screens, but now I need to make the page responsive so that the inline form will switch to a 3-column grid layout on smaller screens like tablets and phones.

Here is the inline form on a large screen:

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

And here is the required layout for mobile screens:

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

Is this possible to achieve in Bootstrap 3?

I would greatly appreciate any tips or advice on how to implement this change!

Code Snippet:

<div class="container">

<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset style="background-color:#F7F7F7">

        <div class="row">
          <div class="form-inline" style="text-align:left">

            <div class="form-group"   style="margin-right:30px;">
                <div class="floating-label-form-group" style="top:-5px;width:180px">
                    <label class="control-label" for="Selection1">Selection1</label>
                    <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                        <option value="" disabled selected>Selection1 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2/option>
                        <option value="3">option 3</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group ">
                <div class="floating-label-form-group">
                    <label class="control-label" for="fName">1st Name</label>  
                    <input id="fName" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>
            <div class="form-group "  style="margin-right:30px">
                <div class="floating-label-form-group">
                    <label class="control-label" for="lName">Last Name</label>  
                    <input id="lName" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:120px">
                    <label class="control-label" for="gender">Gender</label>
                    <select id="gender" name="gender" class="form-control selectpicker" required>
                        <option value="" disabled selected>gender *</option>
                        <option value="1">M</option>
                        <option value="2">F</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:160px">
                    <label class="control-label" for="selection2">Selection2</label>
                    <select id="selection2" name="selection2" class="form-control selectpicker" required>
                        <option value="" disabled selected>Selection2 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

          </div>
        </div><!-- /row -->

    </fieldset>
</form>

jquerycsstwitter-bootstrap-3responsive-design

Answer №1

I made adjustments to your HTML code, eliminating some inline styles and incorporating new classes.

Below is the revised version that matches your requirements:

.myform {
  margin-top: 10px;
}
.myform fieldset {
  padding: 10px 20px;
  background-color: #F7F7F7;
}
.myform .form-group {
  display: block;
}
.myform input,
.myform select {
  min-width: 100%;
  border-radius: 0;
}
.myform .double-input {
  margin: 0;
}
.myform .double-input div[class^='col-'],
.myform .double-input div[class*=' col-'] {
  padding-left: 0;
}
.myform .double-input:first-child div[class^='col-'],
.myform .double-input:first-child div[class*=' col-'] {
  padding: 0;
}
@media (min-width: 992px) {
  .control-label {
    text-align: left;
    display: block;
  }
  .myform .double-input:first-child div[class^='col-'],
  .myform .double-input:first-child div[class*=' col-'] {
    padding-right: 3px;
  }
}
@media (max-width: 992px) {
  .myform input,
  .myform select {
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }
  #fName {
    border-right: 1px solid #ccc;
  }
  #gender {
    border-right: 1px solid #ccc;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="myform" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset>

      <div class="row">
        <div class="col-md-2">
          <div class="form-group">
            <div class="floating-label-form-group">
              <label class="control-label" for="Selection1">Selection1</label>
              <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                <option value="" disabled selected>Selection1 *</option>
                <option value="1">option 1</option>
                <option value="2">option 2/option>
                  <option value="3">option 3</option>
              </select>
            </div>
            <span class="help-block with-errors"></span>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="fName">1st Name</label>
                  <input id="fName" class="form-control" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group ">
                <div class="floating-label-form-group">
                  <label class="control-label" for="lName">Last Name</label>
                  <input id="lName" class="form-control" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="gender">Gender</label>
                  <select id="gender" name="gender" class="form-control selectpicker" required>
                    <option value="" disabled selected>gender *</option>
                    <option value="1">M</option>
                    <option value="2">F</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="selection2">Selection2</label>
                  <select id="selection2" name="selection2" class="form-control selectpicker" required>
                    <option value="" disabled selected>Selection2 *</option>
                    <option value="1">option 1</option>
                    <option value="2">option 2</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /row -->
    </fieldset>
  </form>

Answer №2

Give this a try - use col-md-push-* and col-md-pull-* classes

Check out the updated code on JSFIDDLE

In this example, the form-inline class is used before the form-group class along with some custom styling.

.form-inline .form-control {    
    width: 100%;   
}
.nopadding {
   padding: 0px 2px 0px 0px !important;
   margin: 0px !important;
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="form-inline">
 <div class="form-group">
             <div class="row">
             <div class="col-md-4 col-md-push-8">
                     <div class="col-xs-6 nopadding">
                     <label class="control-label" for="lName">Gender</label>  
                    <select id="gender" name="gender" class="form-control selectpicker" required>
                        <option value="" disabled selected>gender *</option>
                        <option value="1">M</option>
                        <option value="2">F</option>
                    </select>
                    </div>
                
                <div class="col-xs-6 nopadding">
                    <label class="control-label" for="selection2">Selection2</label>
                    <select id="selection2" name="selection2" class="form-control selectpicker" required>
                        <option value="" disabled selected>Selection2 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                    </div></div>
                     <div class="col-md-4">
                <div class="col-xs-6 nopadding">
                    <div class="floating-label-form-group">
                    <label class="control-label" for="fName">1st Name</label>  
                    <input class="form-control" id="fName" name="fName" type="text" required>
                </div>
                </div>
                <div class="col-xs-6 nopadding">
                    
                    <label class="control-label" for="lName">Last Name</label>  
                    <input class="form-control" id="lName" name="lName" type="text" required>
                    </div></div>
  <div class="col-md-4 col-md-pull-8">
                <div class="col-xs-12 nopadding">
                    <label class="control-label" for="Selection1">Selection1</label>
                    <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                        <option value="" disabled selected>Selection1 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                        <option value="3">option 3</option>
                    </select>
                </div>
            
             </div>
        </div>
  </div>
</div>

Answer №3

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container-fluid">

        <form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">


            <fieldset style="background-color:#F7F7F7" style="width:100%;">
                <div class="row">
                  <div class="form-inline" style="text-align:left">
         <div class="form-group col-xs-12 col-sm-4 col-sm-push-8">
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="gender">Gender</label>
                            <select id="gender" name="gender" class="form-control selectpicker" required>
                                <option value="" disabled selected>gender *</option>
                                <option value="1">M</option>
                                <option value="2">F</option>
                            </select>
                            <span class="help-block with-errors">Gender information text</span>
                        </div>             
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="selection2">Selection2</label>
                            <select id="selection2" name="selection2" class="form-control selectpicker" required>
                                <option value="" disabled selected>Selection2 *</option>
                                <option value="1">choice 1</option>
                                <option value="2">choice 2</option>
                            </select>
                            <span class="help-block with-errors">Selection2 information text</span>
                        </div>              
                    </div>
                    <div class="form-group col-xs-12 col-sm-3 col-sm-pull-3">
                        <div class="floating-label-form-group col-md-12 no-pad-right">
                            <label class="control-label" for="Selection1">Selection1</label>
                            <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                                <option value="" disabled selected>Selection1 *</option>
                                <option value="1">choice 1</option>
                                <option value="2">choice 2/option>
                                <option value="3">choice 3</option>
                            </select>
                            <span class="help-block with-errors">Selection1 information text</span>
                        </div>               
                    </div>

                    <div class="form-group col-xs-12 col-sm-5 col-sm-pull-3">
                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="fName">First Name</label>  
                            <input id="fName" name="fName" class="form-control" type="text" required>
                            <span class="help-block with-errors">First Name information text</span>
                        </div>
                        

                        <div class="floating-label-form-group col-xs-6 no-pad-right">
                            <label class="control-label" for="lName">Last Name</label>  
                            <input id="lName" name="lName" class="form-control" type="text" required>
                            <span class="help-block">Last Name information text</span>
                        </div>
                        
                    </div>
                    
                  </div>
                </div><!-- /row -->
            </fieldset>
        </form>

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

decorating elements in a line with colored backgrounds

I am facing an issue where I want to keep three divs aligned horizontally on the same line, but their background colors are causing them to not align properly. Adding margin or padding causes the divs to wrap up instead of staying in line. #service_cont ...

htmlcsstwitter-bootstrapbootstrap-4frontend

Center the image to always align with the text

I am looking to display an image alongside some text, where the number of text lines can vary. It could be one, two, or three lines of text. Here's how it should be handled: If there is only one line of text: The image should be centered with the te ...

htmlcss

Display Bootstrap modal upon page load automatically

Is there a way to automatically trigger the Bootstrap model upon page load? I attempted implementing the following code in my index file: <script type="text/javascript> $(window).load(function () { $('#myModal').modal('sh ...

htmlcsstwitter-bootstrap

Overlay on Tailwindcss Background Video

For a while now, I've been experimenting with incorporating a video background in a div with an overlay that darkens it. Additionally, there needs to be text within the same container. Can anyone provide guidance on achieving this using Tailwind CSS? ...

cssbackgroundtailwind-css

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index

opacity of highcharts heatmap data points reduces to zero

Recently, I integrated a Heat Map feature from the Highcharts library into my app. However, I encountered a strange issue where certain rows of data were not displaying on the map. Please refer to the screenshot below for reference: Upon inspecting the el ...

javascriptjquerycsshighchartsheatmap

Change the color of a c3js chart when it loads

I have been searching for a way to customize the color of a scatter chart's plot, and I came across an example that uses d3 code within the chart http://jsfiddle.net/ot19Lyt8/9/ onmouseover: function (d) { d3.select(d3.selectAll("circle ...

javascriptjqueryd3.jsc3.js

What are the CSS dimensions for fixed width points?

<div class="container"> <div class="content"> Banana </div> </div> Suppose the 'content' element should always occupy a width of either 0, 25, 50, 75 or 100%, depending on its content. If the word 'Banana&apos ...

htmlcss

Chosen selection is yielding tag instead of text value

Having an issue with my bootstrap select element <select id="createAxiomSelect" class="form-select"> <option selected vale="true">True</option> <option value="false">False</ ...

javascripthtmljquerytwitter-bootstrapbootstrap-5

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

As someone who is new to website creation, I am currently working on adding a CSS effect where a popup-text appears when an image is hovered over. I want to create a row of images for the popups by using an unordered list. However, I'm facing a proble ...

css

Is it possible to align the following div within the given scheme using CSS?

I am struggling to style a container (boxContainer) that contains six other divs (box1-box6). Despite my efforts to edit the CSS styles, I cannot seem to achieve the desired look... <div id="boxContainer"> <div id="box1"></div> & ...

cssalignment

Obtaining class names with jQuery: A beginner's guide

If we consider an element structured as follows: <div id="dv" class="red green blue">Something Here !!</div> An attempt was made using the following code snippet: alert($('#dv').attr('class')); However, this returned all ...

jquery

The JQuery feature is malfunctioning

The link in the save column should trigger the code between the script tags to run and display an alert saying ('BBBBBBBBBBBBBBBBBBBB'). However, it doesn't seem to be working as expected. Can someone please assist me in fixing this issue? ...

phpjqueryhtml

Modify the values of several dropdown menus (5 in total) at once using jQuery. The values will be dynamically retrieved from a JSON file

https://i.sstatic.net/9vjlz.png Dropdown values for the first dropdown are 1, 2, 3, 4, 5. Dropdown values for the second dropdown are 25, 26, 27, 28, 29. Dropdown values for the third dropdown are 35, 36, 37, 38, 39. The goal is to have each dropdown load ...

javascriptjquerycheckboxdropdownlaravel-9

evaluating the type of something returns false, but it's accepted as true

I am striving to enhance my SASS media query mixin by introducing different variations of input to it. @media(medium) @media([small, to-large]) @media([[small, to-large], [small, landscape]]) However, I am encountering an issue with an if stateme ...

htmlcsssassscss-mixins

Typing text into an input field by tapping on a picture

Is there a way to create a feature where users can browse and insert images, which will pull the image URL (all image information is stored in a database) into an input field for submission? Similar to how WordPress allows you to browse, select an image, ...

javascriptphpjquery

Customize Bootstrap breadcrumbs with Font Awesome icon divider using SASS

Looking to customize the default breadcrumb style using SASS. Following the guidelines from Bootstrap 4 beta 3 documentation, I made changes in the custom.scss: $breadcrumb-divider: "\f105"; //using FontAwesome icon for fa-angle-right However, setti ...

csstwitter-bootstrapsassbootstrap-4

What is the best way to create a fullscreen div without using an iframe?

My website features various div elements acting as separate windows. However, when I remove these divs, the content no longer fits the entire page. I attempted to use CSS to make it full-page without using iframes, just with a simple <p>Test</p& ...

htmlcssiframe

Mastering the art of utilizing ajax functions effectively

I have been checking online for answers, but I haven't found the information I need. So please excuse me if this question has been asked numerous times before. Currently, I am in the process of developing a website with several Ajax functions. My mai ...

ajaxjquerycode-injection

Are you transitioning from traditional scroll pagination to using ajax?

Is it possible to replace scroll pagination with ajax? I'm looking for an alternative to the large scroll pagination query and wondering if ajax could be used instead. Here is the current code snippet: feeds.scrollFeedPagination({ 'contentPage ...

javascriptjqueryajaxpagination