I am currently working with Bootstrap Grid.
https://i.sstatic.net/giJOI.png
One issue I am facing is when I switch back to my mobile screen, I want the layout to adjust accordingly like https://i.sstatic.net/RYPJm.png
I have tried different methods but still haven't found a solution. Thank you for taking the time to read this!
Looking for help in responsive design using Bootstrap grid system.
UPDATE : improved solution
NOTE: Bootstrap does not natively support responsive sizing for height and width or flex-base. This means that using Bootstrap alone will not achieve the desired effect; you will need to incorporate additional css in your code by creating a new class like h-lg-100
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398849884">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<style>
@media (min-width:768px) {
.h-lg-100 {
height: 100%!important;
}
}
</style>
<body class="vh-100">
<div class="d-flex flex-wrap vh-100 flex-lg-row flex-column text-white w-100 text-center fs-1 ">
<div class="bg-black d-block h-lg-100 h-50 col-lg-4 order-lg-1 ">1</div>
<div class="bg-warning d-block h-100 col-lg-4 order-3 order-lg-2">2</div>
<div class="bg-danger d-block h-lg-100 h-50 col-lg-4 order-lg-3 ">3</div>
</div>
</body>
</body>Snippet of HTML code:
<div class="container">
<div class="row">
<div class="col-md-3 col-6" id="col1">
<h2>1</h2>
</div>
<div class="col-md-3 col-6" id="col2">
<h2>2</h2>
</div>
<div class="col-md-3 col-6" id="col3">
<h2>3</h2>
</div>
</div>
</div>
Snippet of CSS styles:
@media only screen and (max-width: 768px) {
#col2 {
position: absolute;
height: 100%;
top: 0;
right: 0;
}
#col1, #col3 {
margin-right: 50%;
}
.row {
position: relative;
}
}
Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...
I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...
I'm facing an issue with aligning buttons and inputs in my code. The buttons are currently aligned with the labels, but I want them to be aligned with the inputs instead. I've tried using inline forms, but it's not working as expected. What ...
Take a look at this code featuring a grid - can you figure out how many cells are colored yellow and more? Check it out here ...
My goal is to sum up the values in a specific column of a dynamic table by attaching an id property to each row. I am specifically focused on assigning an id to each <td> in every row of the table. UPDATE: Although I have all 4 keys in the <td> ...
Looking for assistance here. I've been working on my theme in vscode and added a new section that is very simple (just text and an icon). It's working perfectly fine in Shopify cli. But when I tried to implement it on my Live theme, the icons ar ...
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .circles { height: 150px; width: 150px; background-color: #bbb; border-radius: 50%; displ ...
I am currently using this code to retrieve values from a database and create a basic line graph (showing response time to an alert vs. UTC time). Everything works smoothly when the data is static, but now I want to try retrieving the data in "real-time" (j ...
<script> $(function() { $('.slideshow').each(function(index, element) { $(element).crossSlide({ sleep: 2, fade: 1 }, [ { src: 'picture' + (index + 1) + '.jpg' } ]); }); ...
I am facing an issue where I want to slightly center text, but whenever I add just 1px of padding-left, it moves to a new line. In my layout, I have 2 columns each occupying 50% width of the screen. One column contains only a photo while the other has a ba ...
My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear u ...
My attempt to create a blurred image effect on a bootstrap card hover is not working as expected. The blur effect works fine without the hover. Here is the code I have been using: .card-img { transition: all 1s ease; -webkit-filter: blur(0px); ...
I recently discovered that the text inside a <button> is automatically vertically centered, whereas the text inside a <div> is aligned to the top. Despite my best efforts, I couldn't determine which CSS rule was responsible for this disti ...
Here's the current layout of my table: Status Draft Pending Complete I'm looking for a way to sort these rows based on their values. The code snippet I've been using only allows sorting by clicking on the status header: onCh ...
After implementing a redirect from http to https in my application, I encountered an issue with custom cursor images not displaying as intended. Prior to the redirect, the custom cursor images worked fine and were visible on the page. The URL for these cur ...
I need assistance with extracting all the correct answers from a multiple choice radio button quiz. The correct answers are identified by the attribute value="true" in the HTML code. Is there a way to iterate through and retrieve the text of all the corr ...
*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textbox ...
I'm in the process of creating a dynamic table using an array of data let data = [{ "criterialimitId": "3", "criteriaName": "Test", "criteriaId": "1", "criteria": "Max Wager", "type": "DAILY", "oprLimit": "2.5", "status": "1", "acti ...
I have a JavaScript function that is triggered when a user clicks a button: htmlstring = ''+ '<div class="input_holder">'+ '<div class="as_input_holder"><input tabindex="1" class="as_input form-control-sm ...
Imagine I have a React.Component that displays components from material-ui: {data.map(value => ( <ListItem key={data.indexOf(value)} primaryText={value} leftCheckbox={ <Checkbox onCheck={this.pr ...