Arranging Columns in Bootstrap 5 Based on Screen Width

My HTML code looks like this:

    <div class="container-fluid">
        <div class="row">
            <div class="col-9">
                <div class="container">...</div>
            </div>
            <div class="col-3">
               <div class="container">...</div>
            </div>
        </div>
    </div>

I am attempting to make the columns stack upon reaching a certain viewport width. I tried using 

col-xs-12 col-sm-12 col-md-9 col-lg-9
for the first column and corresponding classes for the second, but it is not working as expected.

Here is my Bootstrap link in the head section:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372212220627363114252e302e32">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
htmlcsstwitter-bootstrap

Answer №1

Consider utilizing col-12 col-md-9.

Bootstrap follows a "mobile first" approach, which means that the code above signifies: initially, this element will take up the full width as col-12, and then from medium-sized screens onwards it will occupy 3/4 of the row's space as col-md-9.

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

Personalize the drop area in Filepond

Is there a way to customize the filepond droparea by adding custom HTML with placeholder images to guide users on what kind of images should be uploaded and allow multiple uploads? https://i.sstatic.net/VFGfJ.png I attempted to add placeholders in an abs ...

javascripthtmlcssfilepond

A step-by-step guide on incorporating RAW css into your Jekyll website

I am experiencing an issue with loading a CSS file on my website. <link rel="stylesheet" href="/assets/css/my_file.css"> This file is located at _assets/css/my_file.css. However, when I try to load the page, the CSS file does no ...

htmlcssjekyll

Slide the toggle icon to activate the add-to-cart button on click!

Is it possible to achieve the functionality of sliding a plus icon to an add to cart button on click, instead of hover? I have attempted using CSS without success. Would JQuery be able to accomplish this task? codepen.io HTML <div class="socialIcons" ...

javascriptjqueryhtmlcss

Include an HTML header and footer on every page when printing an HTML document

I designed an HTML page with a header, content, and footer. When I attempted to print the page, it spanned across 2 pages with the header on the first page and the footer on the last page. My goal is to have the header and footer display on every page, si ...

htmlcss

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

javascriptjqueryhtmlcss

Add a CSS style to an element when its parent container is hovered using Angular

I am looking for a way to change the appearance of an element when its container is hovered over using CSS or SCSS. Here are my requirements: - The solution must be implemented within the child component or the sass file, without knowledge of parent-child ...

cssangularsass

Repeatedly using jQuery to add elements twice

When I run this code, every time I click the '#right' button, the #slide increments by 2 instead of just 1. For example, if there are a total of 6 elements, it displays the 1st, 3rd, and 5th elements. var currentSlide=2; var totalSlides= ...

jquerycss

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

javascriptc#cssmodel-view-controllersignalr-hub

Filtering data from an array in Vue.js: A step-by-step guide

I am new to Vue and exploring how to display data from an API. Currently, in my code, when a user clicks on a category, the name of that category is saved and the user is redirected to a page called category.vue. My challenge now is to only display questio ...

javascripthtmlvue.js

Issue arising from background-image and content property size

.section--7__photos { height: 50vw; max-height: 70rem; margin: 0 8%; background: url("https://ableton-production.imgix.net/about/photo-8.jpg?crop=right&dpr=1.5&fit=crop&h=250&ixjsv=1.1.3&q=66&w=417") no-repeat top 0% center/ ...

cssbackground-image

Integrate the user input data into a modal window using Bootstrap

Looking for a solution to a problem, I'm trying to implement a system on my website that sends messages to registered users. After creating a form with necessary information, clicking the send button should display a preview of the message before send ...

phphtmltwitter-bootstrap

Is Glyphicons functional in Bootstrap 4?

Yesterday, I downloaded the latest version of bootstrap (version 4) and to my surprise, I noticed that the fonts folder was nowhere to be found. Additionally, I realized that glyphicon was not included in the css. ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4glyphicons

Horizontal JQuery Slider for CategoriesDiscover the smooth, sleek category navigation with

Looking to create a sliding horizontal menu with various categories using a clever div layer setup. The goal is to have one fixed-width div containing another wider div, with only a portion of the second one visible at a time. Encountering two challenges ...

jqueryhtmlslider

Customizing tooltips in SharePoint 2013 for enhanced user experience

I am working with a list that consists of various fields. When hovering over a field, the label name and validated field name are currently displayed. I would like to show a new message explaining what should be filled in that particular field. Additiona ...

javascriptcsssharepointtooltip

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors

Troubleshooting problem with Angular ngx-bootstrap datepicker positioning on mobile devices

Having an issue with ngx-bootstrap/datepicker, it works fine on larger screens but not on mobile screens. Any assistance would be appreciated. https://i.sstatic.net/ZGdyQ.png When the screen size is reduced to mobile (even on actual mobile devices), it o ...

cssangulardatepickerngx-bootstrap

Transferring data between two screens within an Ionic app by harnessing the power of angularJS

As a beginner in Ionic and Angular development, I am currently facing an issue with my Ionic application. I have two pages - one with drop-down selects and a submit button, and another page to process the user's choices and display the results. The pr ...

javascripthtmlangularjsweb-applicationsionic-framework

How can I make a single block expand and have the option to uncheck it by clicking again?

Currently, I am in the process of creating a small program for a website where I intend for certain blocks to expand almost to the size of the window when clicked on to reveal text. Unfortunately, using checkboxes seems to cause all boxes to grow, and with ...

htmlcss

Add a subtle shadow effect to enhance a header image

Struggling to add a shadow effect to the header image on my website. Website URL: I've attempted the following CSS code: .wsite-background { box-shadow: 0px 10px 5px #888888; } Adding a shadow effect is usually straightforward for me, but this t ...

css

Can you explain how to set a title to align with the object on the far left within a Grid component using justify="space-between" in Material UI?

I am currently working on a Grid layout project that involves a Grid container with four Grid items. The first Grid item takes up the full width and contains a title, while the other three Grid items contain avatars. My goal is to align the avatars to the ...

cssreactjsmaterial-ui