Ways to adjust the number of columns in a div using Bootstrap for varying screen sizes of larger devices

https://i.sstatic.net/1nHlm.pngI am new to coding and exploring html, css, and bootstrap. Is it possible to assign varying numbers of columns to a div based on different resolution ranges for larger devices?

Specifically looking at the "lg" range which covers laptops and desktops with screens that are equal to or greater than 1200px wide.

Is there a way to assign different column numbers for widths between 1200-1300px and 1300px-1400px?

Take a look at this image below for reference. The desired UI layout features a form on the left side with four columns - where the 1st and 3rd columns contain labels, and the 2nd and 4th columns contain input controls. Each of these columns is currently assigned "col-lg-3". However, when the width is around 1250px, the form looks fine but requires 6 columns, making some content invisible without a horizontal scrollbar.

On the other hand, if the resolution is approximately 1400px, there is too much space between labels and controls within the form, leaving excess empty space. I am seeking a solution to dynamically adjust the number of columns based on resolution settings.

csshtmltwitter-bootstrap

Answer №2

To customize the layout of columns for different screen sizes, you have a few options. One way is to utilize media queries to adjust the current columns based on the screen width. Alternatively, you can create new classes such as .col-xxl-2 with a specific percentage width, like 20%, and apply them within a targeted media query for the desired size range. For example, you could have a div with multiple column classes: 

<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div>
, allowing for flexibility in design across various devices. While setting constraints based on specific pixel values may seem unnecessary given the wide range of screen sizes available today, it ultimately depends on your design goals.

Edit An additional tip would be to incorporate the form-inline class to your form elements and encapsulate labels and inputs within a form-group. This will ensure proper alignment and spacing, regardless of the viewport size.

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

Encountering difficulties with image processing on a web page

Recently, I've been experimenting with uploading an image and converting it to a grayscale version on my webpage. Oddly enough, the javascript code works perfectly when tested locally but fails to generate the grayscale image once integrated onto the ...

javascripthtmlimage-processing

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

htmlcss

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

Unable to modify the appearance of text on the canvas

Trying to customize the font style of canvas text with Press Start 2P The URL has been imported into a CSS file as follows: @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); .canvasClass{ font-family: ...

javascripthtmlcsscanvashtml5-canvas

Modify text by adjusting text color based on the contrast with the background color using knockout databinding

I am working with a table that contains data from my database: Here is the ViewModel structure: function alertViewModel(i) { var self = this; self.Id = ko.observable(i.Id); self.AlertType = ko.observable(i.AlertType); self.Category = ko.observab ...

cssknockout.js

creating unique styles for your Ionic app with Angular using JSON

Having trouble changing the item color. Does anyone know why my CSS isn't working, or if I'm missing something? <ion-view title="Add order to a table"> <ion-content class="has-header has-subheader"> <ion-list> ...

cssangularjsjsoncordovaionic-framework

Transfer the choices from a dropdown list to a different JSP page

In my current JSP code, I have a select element that looks like the following: <select name="withoutAccess" size="5"> <c:foreach var="item" items="${obj.withoutAccess}"> <option>${item}</option> </c:foreach> </sel ...

htmlformslistjsp

What could be causing the p tag to be displacing the parent div downwards?

Can someone help with an issue I'm having? I have two divs that are supposed to take up half of the screen each. However, when I add a p tag inside the second div, it gets pulled down. I am working on creating an HTML email, so I can only use inline s ...

htmlcssinline-styles

Share the name of the Quasar component with the Vue 3 render function

I'm struggling to dynamically create a Vue 3 app with different components specified by name, such as "div", "button", or Quasar's "q-btn". When I try to pass the latter to Vue's render function Vue.h, I encounter difficulties. <html> ...

javascripthtmlvue.jsvuejs3quasar-framework

CSS Style in Safari does not conceal Div on Tailwind

When switching the screen from desktop to mobile in ReactJS/Tailwind, I have hidden certain images using the following code: <div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0&qu ...

javascripthtmlcssreactjstailwind-css

Safari's Web Audio API suffering from subpar performance and various shortcomings

For my University project, I am developing an HTML and JavaScript-based mp3 player using the Web Audio API. You can check out the progress of this project by visiting this link: While everything is running smoothly on Firefox and Chrome, Safari is posing ...

javascripthtmlaudiosafariweb-audio-api

displaying only the date in bootstrap-datetimepicker

I am currently utilizing the repository created by smalot, and my intention is to choose and display dates only (while in other instances I showcase both date and time, hence utilizing this repository). Although I have succeeded in selecting dates only, th ...

javascriptjquerytwitter-bootstrapbootstrap-datetimepickersmalot-datetimepicker

Employing plain Javascript (without the use of jQuery) to concatenate information from two JSON strings - encountering an error due to the absence of

Having a JSON stringified form data like this: {"name":"jack miller", "address":"123 main st"} I aimed to append more records but encountered an error saying "append is not a function." The desired outcome is to have both sets of records in this format: ...

javascripthtmljsonreactjsforms

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

cssnode.jsarraysnext.jstailwind-css

Having trouble importing JS into HTML file with NodeJS

I have created a web server using NodeJS that serves the file index.html. However, when I attempt to add a JavaScript file to my HTML document, the browser displays an error message stating The resource "http://localhost:3000/includes/main.js" was blocked ...

javascripthtmlnode.jsexpress

What are your thoughts on combining a JSON object with HTML?

When using ASP.NET MVC, it is possible to return a JSONResult. return JSON(new { View = RenderViewAsString("MyView", model), wasSuccessful = true}) This approach combines HTML and data in a single JSON object. The goal is to utilize strongly typed HtmlHe ...

javascriptasp.nethtmljson

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

htmlcss

Switching markdown data into HTML within a Django and React application

I am considering the best way to store blog content in my database so that I can easily display it on an HTML page using an AJAX call. After conducting research, I have found suggestions to store the blog post as markdown, which seems logical since it supp ...

htmldjangoreactjsdjango-rest-frameworkmarkdown

What is the distinction between selecting and entering a date input value?

When a user selects a date, it needs to be immediately sent to the server. If they manually type in the date, it should be sent on blur. The issue arises when the oninput event is triggered for each keydown event, causing unnecessary server requests while ...

javascripthtmlsvelte

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

javascriptjqueryhtmlcssjquery-ui