Customize div widths in Bootstrap according to screen size

Struggling to find a solution while sticking with native bootstrap utility classes. My goal is to have this section take up 50% of the space on large screens and 75% on small devices:

<div class="col-10 col-xl-8 justify-content-center align-items-center h-100">
    <div class="text-white w-75 shaded-background">
      <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
      <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
    </div>
</div>

https://codepen.io/literakl/pen/XWyjdMo

I couldn't find a w-xl-50 class like with col. Considering using 

@media screen and (min-width: 1024px)
as a workaround if there's no way to use the xl selector. Any better ideas?

cssbootstrap-5

Answer №1

Replace w-75 with col-9 col-lg-6.

col-9 sets the width to 75% and col-lg-6 sets the width to 50% at a minimum screen width of 992px.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7a9b7ab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
  .shaded-background {
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
  }
</style>

<div class="d-flex justify-content-center align-items-center h-100">
  <div class="text-white col-9 col-lg-6 shaded-background">
    <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
    <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
  </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

The div needs to be positioned above another div, not beneath it

Just returning to the world of coding and struggling with a basic problem. Any help would be greatly appreciated. I am trying to position the 'header-top' (red) div at the top, and the 'header-bottom' (blue) div at the bottom. However, ...

htmlcss

What is preventing me from changing the text color of this span element to white?

For some reason, I'm trying to make the first two texts of each line appear in white, but my CSS doesn't seem to affect the span elements generated by JavaScript. Take a look at the code snippet below for more details. I'm still learning ho ...

javascriptcssvue.js

What is the best way to adjust the position of a dropdown menu in Material UI?

I am currently working on a Gatsby application and I'm trying to achieve a dropdown menu effect when the Menu icon is clicked, with the menu appearing right under the header and expanding to 100% width. Below is the code snippet that I have been using ...

cssreactjsdrop-down-menumaterial-uigatsby

Compass - substitute a single value for an alternate attribute

Can I utilize a value from one class to customize another? Consider the following class: .sourceClass { color: red; } And now, let's say we have this class: .destinationClass { border-color: ###needs to match the color in .sourceClass => re ...

csssasscompass

Script for converting Fixed Positioned Elements to Static

I am frequently finding that elements on web pages are causing disruptions due to their fixed positioning. I am exploring ways to disable the position: fixed CSS rules on any website I visit. To address this issue, I have developed a userscript specifical ...

javascriptcssfirefoxgreasemonkey

Issue with displaying submenu in dropdown menu

I need assistance with a project I am currently working on. You can view the project here Everything seems to be functioning properly, except for when I click on the button Click to expand, the sub-menu (Link 1, Link 2, ...) appears far left of the button ...

htmlcss

Incorporating CSS into an HTML page created by a Python CGI script

Last week, I was handed a Python-based monitoring and notification tool to work on. My task is to develop a proof of concept dashboard using the data collected by this tool over the years. The catch is that I'm fairly new to Python and have never dabb ...

htmlcsspython-2.7tomcat7cgi

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

cssgoogle-mapscanvasgoogle-maps-api-3marker

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

I have implemented Bootstrap validation for the other input fields in this form by using the 'required' attribute. However, for these two specific fields, if at least one is not empty, then the form should be submitted. <form class="needs ...

javascripthtmlvalidationbootstrap-5

What is the best way to ensure that the background color in CSS fills the entire browser window?

Is there a way to expand the background color to fill the entire browser window? .top{ background-color:green; color: white; height:1000px; display: flex; flex-direction: column; } <div className = "top"> <Header/> ...

javascripthtmlcssreactjsfrontend

Tips for importing HTML modules using AJAX technology?

Is it possible to load the correct module on my site depending on the path that the user enters? Would storing the HTML in a file named some_file.htm, ajaxing that file to the client, and then appending it to the DOM work for this purpose? I'm curio ...

javascripthtmlcss

Eliminate the excess space at the bottom of rows in Materialize CSS

Having difficulty adjusting the padding between two rows in materializecss Troubles with Padding https://i.sstatic.net/KFe1w.png Seeking to eliminate the bottom padding. Managed to remove left and right padding with the following code: <div class="c ...

cssmaterial-designmaterialize

Eliminate the bottom padding on the body in your HTML and CSS code

My Unique Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <style> /*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/ ...

htmlcssflexbox

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

htmlcssflexbox

Utilizing D3 for embedding a background image in an SVG

After exploring different options, I have decided to switch from my previous Bootstrap framework to using a solid SVG strip with D3 for my project. The objective is to create 3 clickable triangles that will mask images and act as anchor links within the s ...

javascripthtmlcsssvgd3.js

Narrowing the width of a line-broken <h1> heading

I have encountered a problem that can be best described with two images provided below. Let's focus on the relevant CSS snippet: h1 { display: inline-block; background-color: pink; } The first example shows an <h1> tag with a short ti ...

htmlcss

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

javascriptjqueryhtmlcsspolymer

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs

Extract image styles from a different webpage

My website is located at: I'm attempting to replicate the testimonial photo effect that can be seen on this website: https://i.sstatic.net/70Jqd.png What CSS code do I need to include in order to make the image with the class "client-pic" circula ...

htmlcss