Converting two adjacent columns in Bootstrap 5 into two rows on smaller screens: a step-by-step guide

I have recently started using Bootstrap for a project and I want to ensure that my application is responsive on various device screens including normal laptops, iPad Mini (768 X 1024), and iPad Air (820 X 1180). Below is a snippet of my HTML code:

<div class="row">
   <div class="col-sm-12 col-md-6 text-start">
      <span class="col-md-2" *ngFor="let i of data" >
         <p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"gt;</p-dropdown>
         &nbsp;&nbsp;
      </span>
   </div>
   <div class="col-sm-12 col-md-6">
      <button pButton label="reset" class="reset-button p-button-outlined"></button>
      <button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
   </div>
</div>

When viewed on a normal screen, it looks like this: https://i.sstatic.net/hjo5D.png

But when I switch to an iPad Air, the dropdowns and buttons get stacked on top of each other. Is there a way to display them in separate rows, with all dropdowns in one row and all buttons in the next row? Any advice or solution would be greatly appreciated.

htmlcssbootstrap-5

Answer №1

The reason for the issue is that you are using col-md-6 instead of col-md-12. In Bootstrap, columns are divided into 12 parts, so on a medium device, a col-md-6 takes up 50% of the width. This causes the buttons and dropdowns to be forced down due to the narrower width.

To solve this, you can add additional classes to set the width for medium and large devices like this:

<div class="row">
   <div class="col-sm-12 col-md-12 col-lg-6 text-start">
      <span class="col-md-2" *ngFor="let i of data" > <!-- dynamic no. of dropdowns -->
         <p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"></p-dropdown>
         &nbsp;&nbsp;
      </span>
   </div>
   <div class="col-sm-12 col-md-12 col-lg-6">
      <button pButton label="reset" class="reset-button p-button-outlined"></button>
      <button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
   </div>
</div>

Make sure to set the widths for the buttons and dropdowns to avoid them being forced down.

You can refer to the default breakpoints here: https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints

Answer №2

If you are currently facing the issue of breaking the row into 2 columns at "md" or higher, you may also need to consider breaking it at "lg" for the desired output on an iPad. Ensure to include the "row" class in your inner div for its children to break into columns. Additionally, note that writing "col-sm-12" is not necessary as the default is already set to 12.

Consider the following structure:

<div class="row">
   <div class="col-lg-6 text-start row">
      <span class="col-md-2" *ngFor="let i of data" > <!-- dynamic number of dropdowns -->
         <p-dropdown styleClass="dropdown" [options]="i" optionLabel="name"></p-dropdown>
         &nbsp;&nbsp;
      </span>
   </div>
<div class="col-lg-6">
    <button pButton label="reset" class="reset-button p-button-outlined"> 
    </button>
    <button pButton label="apply" class="apply-button" (click)="showDialog()"></button>
</div>

To ensure proper alignment of the button divs, you may need to add more classes. It is recommended to provide a JSFiddle for better debugging assistance.

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

"Learn the steps to efficiently input multiple data entries with the same name from a single form into different rows within the same column of

How can I modify this form to insert four separate data entries in the same column upon submission? <form action="entry.php" method="post" > <table> <tr> <td> <input type="text" name="searchid[]" id="searchid" placeh ...

phphtmlmysqlsql

Hovering Div Issue

I have two divs named me and bubble nested within another div called holder. I am trying to trigger an action when a user hovers over the holder div. Strangely, the action works properly when I hover over me, but it doesn't seem to register when I hov ...

jqueryhtmlhover

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml

Angular JS application failing to load in browser due to a simple issue

I recently completed working on two pages index.html and app.js, which were created while following a helpful tutorial found here. The structure and content of each page are outlined below: index.html <!DOCTYPE html> <html ng-app ="store"> ...

angularjshtml

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

javascriptcssviewportresponsive

Issue with margin-bottom in flexbox causing layout problems

My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...

htmlcssflexboxmargin

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

The Angular service successfully provides a value, yet it fails to appear on the webpage

Currently, I am starting to dive into Angular from the ground up. One of my recent tasks involved creating a component called 'mylink' along with a corresponding service. In my attempt to retrieve a string value from the service using 'obse ...

htmlangulartypescript

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

What are the best ways to create a responsive login form?

After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...

htmlcssresponsive-design

There seems to be a lag in the animation and odd behavior with the collapse feature of the

var nav = document.querySelector('nav'); window.addEventListener('scroll', function () { if (window.pageYOffset > 40) { nav.classList.add('bg-white'); } else { nav.classList.remove ...

bootstrap-5laghamburger-menu

One method I use to retrieve ajax data and assign it before rendering the view

Despite putting the ajax.get in the created function, I am still unable to retrieve the ap_name value. This issue is related to vue.js created: function () { ajax.get('/envs').then(function (res) { this.apName = res.AP_NAME; ...

javascripthtmlvue.js

Navigating through directories in an HTML file

In my directory, the folders are named in uppercase letters and have the following structure: ONLINESHOP |-- index.html |-- COMPONENTS |-- CONFIG |-- TEMPLATES |-- CSS |-- main-style.css |-- CONTROLLERS |-- MODE ...

htmlcssrelative-path

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

Decreasing the space between columns in Bootstrap 3

My objective is: https://i.sstatic.net/UIPsq.png However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller): https://i.sstatic.net/GbLFE.png The problem lies in the gutter s ...

htmlcsstwitter-bootstrapgutter

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...

javascripthtmlcssvue.js

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Can a border-bottom be made the same size as a class it is not linked to in CSS?

Can I set a border-bottom to match the size of a separate class? For example, I want a border-bottom at the bottom of each <section> tag. However, since the sections span the full width of the screen, the border-bottom inherits that width. Each < ...

htmlcsssassbootstrap-4

Despite importing jQuery, the variable '$' cannot be located

Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...

javascriptjqueryhtml