I'm having trouble with the column layout in Bootstrap and can't figure out how to fix it.
I want it to look like this on a desktop: https://i.sstatic.net/bcwpu.png
and like this on mobile: https://i.sstatic.net/ALcLA.png
I need to use the following row and columns. Does anyone have any ideas on how to achieve this?
<div class="container">
<div class="col-sm-4">
1
</div>
<div class="col-6">
2
</div>
<div class="col-sm-4">
3
</div>
</div>
To arrange the order of columns, you can utilize Bootstrap's order classes such as order-* and order-sm-*.
For instance:
order-sm-2 order-3, making it appear second on screens wider than 576px, and third on smaller screens.order-sm-3 order-2, placing it as the third column on larger screens and second on smaller ones.An example using the sm breakpoint:
.row div {
border: 1px solid #ccc;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-sm-4"> 1 </div>
<div class="col-sm-4 col-6 order-sm-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-sm-3 order-2"> 3 </div>
</div>
</div>Another example using a larger breakpoint: Here are the same classes applied with a different breakpoint for comparison within the snippet:
.row div {
border: 1px solid #ccc;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 col-lg-4"> 1 </div>
<div class="col-lg-4 col-6 order-lg-2 order-3"> 2 </div>
<div class="col-4 col-sm-4 order-lg-3 order-2"> 3 </div>
</div>
</div>I am looking for a solution that requests users to upload 4 different files when filling out the form. Check out this example of one of the inputs: <div class="custom-file"> <input type="file" class="custom-file-input" accept="video/*" id="v ...
Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...
I'm attempting to make a curl request to a webpage using GET to send parameters with their values. It works for the first two, but the last one "a-listibg-pro" keeps causing issues, possibly due to the hyphen. Any assistance would be appreciated. cur ...
I'm using Material-UI to implement a Switch component on my project. This particular component allows for the addition of icons, however, I've encountered an issue with alignment when including them. Is there a way to horizontally center align b ...
When styling an input element with JavaScript, it seems that any properties set this way are ignored in a :focus rule. An example is provided to illustrate this: Initially, the background and border of the input element matches the surrounding element ( ...
Is there a method to eliminate the transparency of content/images within a <div> that is transparent? Below is the provided HTML: <div id="main-button-wrapper" class="left"> <div id="button-bg-layer" class="box-bg-layer corner ...
Currently, I am working on developing a mobile web app. Unfortunately, Safari in iOS 5.1 or earlier has limited memory capabilities. In order to reduce memory usage while using css3 transitions, I have discovered that utilizing the css styles "display:none ...
I encountered an issue while attempting to transfer all the JavaScript to a separate js file and then adding that js file to the html per usual. The console displayed the following error message: The resource from “http://localhost:3000/public/main.js” ...
Struggling to integrate dynamic parameters from the URL into a frame, but nothing seems to be working. I've tried placing them inside and outside the tags, before and after... Anyone have any insights on this? The URL in the top frame is . The initia ...
Operating a website focused on financial planning where users can input various values and cell colors into an HTML table. It is crucial to uphold the integrity of these HTML tables. How can I store the complete HTML table (including values and colors) i ...
I'm working with Tailwind CSS and Vue.js to create a modal component. Since Tailwind doesn't natively support Vue 2, I had to implement the transitions myself. You can check out the desired effect here. Below is the code snippet: <template> ...
When it comes to showing/hiding content, there are two main approaches that I would consider: Creating and destroying elements as needed using jQuery's append() and remove() methods. Having all elements already in the HTML but hiding/disabling them ...
I'm trying to eliminate the space between a header and a table in my website, but I'm having trouble figuring out how to do it. Check out the screenshot where I've highlighted the issue. https://i.sstatic.net/pZLJi.png ul { list-style- ...
I can't figure out why, but it seems to be functioning properly on every other internet platform except this one. The first picture shows the button in IE, the second contains the code, and the third displays the button in Chrome. https://i.sstatic. ...
Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...
Looking for some help with a page layout issue. I have a header on my page with a title and menu. Currently, the header has a margin and a minimum width set to the width of the menu. However, when the user resizes the window and reaches the minimum width, ...
Currently utilizing behat/mink, selenium 2 driver, and chrome driver in php to navigate a unique issue. Attempting to access a dummy HTML page proving challenging. Our team is implementing a chatbot onto our main site's landing page as an iframe posit ...
I'm having an issue with an AJAX modal window. The grey background shows up, but the view doesn't appear. Here is the link to the modal window: <%= link_to "Create Message", messages_path, remote: true, data: { toggle: "modal", target: "#aj ...
Is there a way to have the Bootsrap mobile menu automatically unfold when a link (anchor on the same page) is clicked? The menu unfolds with class navbar-collapse collapse in The menu folds with class navbar-collapse collapse out I already have an oncl ...
My goal is to ensure my website is responsive by utilizing HTML5, CSS3, JavaScript, and jQuery. I am facing an issue with the responsiveness of my menu in the CSS code. PRÉSENTATION OFFRES PRODUITS RÉFÉRENCE CONTACT Menu nav { ...