mobile-responsive vertical alignment using Bootstrap

Here is a jsbin that demonstrates the issue and here is the markup:

<div class="row">
  <div class="col-sm-4 xs-12">
    <strong>UK Postcode</strong>
  </div>
  <div class="col-sm-4 xs-12">
    <strong>Other Field</strong>
  </div>
</div>
<div class="row">
  <div class="col-sm-3 xs-12">
    <input class="form-input"/>
  </div>
  <div class="col-sm-1 xs-12">
    <strong>Or</strong>
  </div>
  <div class="col-sm-3 xs-12">
    <input class="form-input"/>
  </div>
</div>

The elements are correctly aligned in all modes except for mobile.

In mobile mode, I want them to stack vertically. However, I'm unsure how to position the other field label below the Or label and above the correct input on mobile devices.

Currently, it displays like this in mobile mode:

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

Take a look at this code snippet. Feel free to experiment with something similar.

<div class="row">
  <div class="col-sm-3 xs-12">
    <label class="labels" for="fm1">UK Postcode</label>
    <input class="form-input"/ id="fm1">
  </div>
  <div class="col-sm-1 xs-12">
    <strong>Or</strong>
  </div>
  <div class="col-sm-3 xs-12">
  <label class="labels" for="fm2">Other Field</label>
    <input class="form-input" id="fm2">
  </div>
</div>

Answer №2

Rework your HTML code and incorporate some of Bootstrap's predefined classes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">

    <div class="col-xs-12 col-sm-4">
      <label><strong>UK Postcode</strong></label>
      <div class="form-group">
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="col-xs-12 col-sm-1">
      <div class="invisible hidden-xs">
        &nbsp;
        <!-- Intended to create consistent white space above OR text while hiding the gap on mobile devices. -->
      </div>
      <div class="form-group">
        <strong>OR</strong>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <label><strong>Other Field</strong></label>
      <div class="form-group">
        <input type="text" class="form-control">
      </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

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

javascriptjqueryhtmlcsszurb-foundation

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

cssreactjsmaterial-uistyling

Text enhancement with text-shadow in jQuery and CSS

Before I reached out, I had been searching for a solution. In the process of building my website, I decided to incorporate text-shadow. It seemed straightforward, but turned out to be more complicated than expected. I discovered that IE does not support ...

jquerycss

What is the best way to justify list items to the left?

Having trouble aligning my list content to the left. Any suggestions are welcome! Here is a snippet of the code: <div class="col-md-4 mb-1"> <i class="fas fa-hiking fa-4x"></i> <h4 class="my-4" font-weight-bold&g ...

htmlcsshtml-lists

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

cssreactjsoptimizationnpmsass

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Switching the class from "untoggled" items to the selected item in React

Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format: {object.map((o) => ( <Accordion key={o.id} title={o.question} className="i ...

cssreactjsreact-hookstoggleaccordion

Switching Text in ReactJS from V to X: A Tutorial

I have been utilizing a Switch component from react-switch in my project. import Switch from 'react-switch'; render() { return <Switch onChange={this.onChangeStatus} onClick={this.onChangeStatus} c ...

cssreactjs

Can search engines understand and interpret CSS files?

Upon examining various CSS files across different websites, I've noticed comments similar to the one below: /* Theme Name: CSSnewbie V2 Theme URI: http://www.cssnewbie.com Description: Second version of CSSnewbie, based on Carrington theme by Crowd ...

cssseo

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, ...

javascripthtmlcss

Troubleshooting Problem: Adjusting the hover border color for TextField in ReactJS Material UI

I'm having trouble setting the hover border color of a TextField to a theme variable. It seems that in order for the hover borderColor to work, it needs the "!important" tag. However, I am unsure of how to incorporate this into the theme variable. Th ...

cssreactjsmaterial-ui

Expanding the width of a bootstrap dropdown menu

Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Anchor tags created using JQuery will remain on the same page without redirecting

Presented below is the code I have utilized to construct the anchor tag along with its content. $('div#right-slide').html("<a href=\"http://www.XXXXXXXXXXXX.info/limited-specials/\" ><h1 id=\"specials\">Click Here ...

javascriptjqueryhtmlcssanchor

Build a photo carousel similar to a YouTube channel

Is there a way to create an image slider similar to the one on YouTube channels? I've noticed that when there are multiple videos on a channel, YouTube displays them in a slider with back and forth buttons to navigate through the videos that aren&apos ...

javascriptjquerycssimageslider

Ways to implement CSS styling for a particular HTML element

HTML: <div class="tagline">Web Portal Name</div><br /> <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;"&g ...

htmlcss

Strategies for limiting a table row in JavaScript or jQuery without utilizing the style tag or class attribute for that specific row

I am looking for a way to limit the display of records in a table. Currently, I can restrict the table rows using the style property, but this causes UI issues such as missing mouse-over effects for the entire row. I need to ensure that mouse-over functi ...

javascriptjqueryhtmlcss

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins

What's the Hold-Up with IntersectionObserver in Brackets?

As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing ...

javascripthtmlcss

Unable to initialize the bootstrap datepicker module

I'm having trouble initializing bootstrap-datepicker from this GitHub repository: https://github.com/uxsolutions/bootstrap-datepicker. I can't seem to get it to work properly or call any methods or events on it. My setup includes Laravel 5.4.7, ...

jquerytwitter-bootstrapdatepickervue.jsbootstrap-datepicker