Trouble aligning two columns in a row with Bootstrap 4

Hey there! I've encountered an issue with my login form using bootstrap 4. I have set up two col-md-6 columns in a row for "Remember Me" and "Forgot Password", but on mobile devices, the "Forgot Password" section jumps down from the row. Can anyone shed some light on why this might be happening? Thanks in advance!

Check out the screenshot here:

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

<div class="row">
      <div class="col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>
htmlcssformsbootstrap-4

Answer №1

To ensure styles apply for smaller devices, it's important to remove the md declaration. Instead, specify that the style should only apply if the device is larger than 768px.

<div class="row">
      <div class="col-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>

For more information on Bootstrap grids, visit: https://getbootstrap.com/docs/4.4/layout/grid/

Answer №2

If the version of Bootstrap you're using is v4 (as indicated by your tags), you can easily accomplish the following:

<div class="row">
 <div class="col">
   Insert content here
 </div>
 <div class="col">
   Insert content here
 </div>
</div>

Check out the documentation for v4 grid

Answer №3

you have utilized col-md-6 for tablets (768px - 992px)

however, by default, your div is col-12 on mobile (0 - 576px)

this means you need to create a custom grid for mobile

for example: for the first div, use: class="col-4" and for the second div, use: class="col-8"

<div class="row">
      <div class="col-6 col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </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

Generating a Radio Button Label on-the-fly using Angular 8 with Typescript, HTML, and SCSS

Struggling with generating a radio button name dynamically? Looking to learn how to dynamically generate a radio button name in your HTML code? Check out the snippet below: <table> <td> <input type="radio" #radio [id]="inputId" ...

htmlangulartypescriptscss-lint

Finding the perfect pairing: How to align counters with objects?

public counter = 0; x0: any; x1: any; x2: any; x3: any; x4: any; next(){ this.counter += 1; this.storage.set("Count", this.counter); console.log(this.counter); this.logic(); } logic(){ //automatic counter here var xNum = JSON.parse(JSON.stri ...

javascripthtmlangulartypescriptionic-framework

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Struggling to incorporate div elements and generate graphs with Google charts? The issue arises in the draw function, where attempts to access a div element using document.getElementById() result in null values and an error message stating "container not ...

javascriptjqueryhtmlajaxgoogle-api

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

javascripthtmlreactjs

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

I have developed an application using Streamlit that requires the ability to read multiple files simultaneously. To achieve this, I am utilizing the file_uploader() component with the parameter accept_multiple_files=True. I have two queries: Firstly, is ...

pythonhtmlpython-3.xstreamlit

Is there a way to run both PHP and HTML code using the eval function?

Is it possible to execute HTML and PHP simultaneously using the eval function? eval ("<center> this is some html </center>"); The above code does not yield the desired output, so I am considering changing it to: echo ("<center> this is ...

phphtml

Dissipating visuals / Effortless website navigation

Do you have experience working with HTML or are you looking for specific code examples? I've noticed some websites with sliders that feature clickable images fading in as soon as the page loads. I tried searching for information on how to achieve thi ...

javascriptjqueryhtmlcssimage

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...

javascriptjqueryhtmlsimplyscroll

Tips for storing HTML form data in a local JSON file without the need for PHP or Node.js dependencies

I'm interested in saving any information panel in an HTML file to a local JSON file. For example, if there are blocks like this: <div class="panel"> <div> <input type="text" name="producttype" id=&q ...

javascripthtmljqueryjsonajax

Place a div in a location where it seems to be positioned beyond the main wrapper's width of 980 pixels

Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...

jqueryhtmlcssxhtml

iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help. Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below: O ...

ioscssiphoneios7ionic-framework

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

htmlcssangularng-bootstrap

What is the best strategy for managing pagination when dealing with a large number of pages?

Up until now, I have understood that pagination only links different pages together. This works fine when dealing with a limited number of pages or posts to display. However, what if I have 30 or more pages to paginate? Wouldn't it be impractical to c ...

javascriptjqueryhtmlcsspagination

What is the best way to retrieve the value of a div using AutoIt?

For this particular scenario, my objective is to extract a specific value from the last div element in the following list: <div id="past"> <div class="ball ball-8" data-rollid="242539">11</div> <div class="ball ball-8" data-ro ...

htmlwebautoit

Having trouble with regex failing to capture newlines in sed or perl?

I am currently working on cleaning a CSV file, which involves removing HTML tags within some of the values. I recently found a solution for this issue: by using the following command sed -e 's/<[^>]*>//g' file.html, as suggested in this ...

htmlregexperlcsvsed

Is there a way to rearrange html elements using media queries?

Here is a snippet of code showcasing how my website is structured for both desktop and mobile views. Display on Desktop <body> <div> <header> <div>example</div> <a><img src"my logo is here"/& ...

htmlcssresponsive-designmedia-queries

Dynamic JavaScript tool

Does anyone know which library is being used on the website linked here? I am working on a project similar to this and would appreciate if anyone can identify this library for me. Thank you in advance. ...

javascripthtmlcss

Why is my CSS selector automatically converted to uppercase in Internet Explorer?

I am facing an issue with my CSS file. Here is how it looks: /*mycss.css*/ body { margin: 0px; padding: 0px; } a:link { color: rgb(255, 255, 255); font-weight: normal; text-decoration: underline; } a:visited { color: rgb(255, 255, 255); font-weight: norm ...

cssinternet-explorercss-selectors

Utilizing data attributes for storing and selecting dual prices on an option

I need help creating a form with options that have two potential values. The user will first choose between "Low Price" (lp) or "High Price" (hp), and then select either Type 1 or Type 2, both of which have data attributes for "hp" and "lp". My goal is to ...

jqueryhtmlformsinput

Modifying the class of an HTML element using JavaScript

Is it possible to dynamically change the class of an HTML element based on a user's selection with a radio button? I am facing an issue where I receive the following error message: "Error: missing ) after argument list Source File: website Line: 1, C ...

javascripthtmlclass