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:

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

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

How can HtmlUnit be used to identify and address website pages that display errors?

I've encountered an issue while trying to access this Ajax page through my Java program using the HtmlUnit 2.15 API. It seems that the problem arises from a broken link to a missing file located here. This is the snippet of code I'm working with ...

javajavascriptcssajaxhtmlunit

What steps do I need to take in order to integrate my unique landing page design into Wordpress

Currently, I am involved in a project that utilizes Node.js on Docker. As part of this project, I have developed a landing page using Bootstrap. In the future stages of the project, our team plans to incorporate Wordpress as a content management system ( ...

node.jswordpressbootstrap-4twitter-bootstrap-3

Make sure your website design is responsive by setting the body to the device's

https://i.sstatic.net/3xHcx.png I'm struggling to make the body of my page responsive for mobile users. Whenever I try using this line of code, it just creates a messy layout. Any advice on how to fix this? <meta name="viewport" cont ...

htmlcss

Tips for anchoring a row to the bottom of a Bootstrap webpage

After working with bootstrap, I am looking to position the last row of the page at the bottom in a fixed and responsive size manner. ...

csshtmlbootstrap-4

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

How can I extract the page's output using JQuery?

Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...

javascriptjqueryhtmlcssajax

Is there a way to prevent the Material UI Chip component from appearing when there is no content present?

I have developed an application that pulls content from an API and displays it on the screen. Within this app, I have implemented a Material UI Card component to showcase the retrieved information, along with a MUI Chip component nested within the card. &l ...

javascriptcssreactjsmaterial-ui

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

Tips for creating semi-circular shapes using CSS gradients

I am trying to design a div element with a background made up of two colors divided by a half circle: My preference is to use gradients for easier animation purposes. I am looking to avoid using pseudo-elements or border-radius, and my HTML structure limi ...

cssbackground-imagegradient

Applying CSS transitions and transforms to SVG elements

Having trouble animating an SVG group with CSS transitions after applying a CSS transform? Check out my code below and let me know if you spot the issue. Inline SVG Code <a href="javascript:void(0)" class="hub-icon-container"> <svg xmlns="ht ...

htmlcsssvg

Ensure each alternate div has a unique background hue

While attempting to use CSS to assign a different background color to every second div element, I encountered an issue where both divs were affected when using (odd) and none when using (even). How can this be explained? .hoverDiv:nth-child(odd) { ba ...

htmlcss

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Place a pair of divs in the center next to one another

What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...

htmlcss

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Customizing label printing using HTML and CSS. Learn how to dynamically adjust label and container sizes based on label dimensions

After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues. Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. T ...

htmlcssprintinglabelautosizing

Animate CSS every quarter of a minute

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

htmlcssanimation

Font Awesome icons displayed using the <i class="icon-ok"></i> markup are not styled correctly and do not respond to events in Chrome

I implemented Font-Awesome, an iconic font designed for use with Twitter Bootstrap. Here is the markup: <i class="icon-remove reset-preference-button"></i> And here is the CSS: .reset-preference-button { cursor: pointer; } For JavaScript f ...

jquerycsstwitter-bootstrapfont-awesomejquery-events

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

htmlcsswordpress

Design a visually stunning image grid with the use of Bootstrap 4

I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below: https://i.sstatic.net/azsxa.jpg The issue I am facing is aligning the right margin (red line), as illustrated below: https://i.sstatic. ...

htmlcssbootstrap-4css-grid