Can anyone help me figure out how to rearrange a bootstrap grid from three columns on desktop to one column above and two below on mobile?
I've attempted multiple methods, but haven't had any luck...
Can anyone help me figure out how to rearrange a bootstrap grid from three columns on desktop to one column above and two below on mobile?
I've attempted multiple methods, but haven't had any luck...
Update for mobile display: The last two divs now have a class of col-6, while the first div has a class of col-12.
The use of col-xs-* classes has been removed in Bootstrap 4 and replaced with col-*
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 text-center">
<p>1</p>
</div>
<div class="col-6 col-sm-4 text-center">
<p>2</p>
</div>
<div class="col-6 col-sm-4 text-center">
<p>3</p>
</div>
</div>
</div>Here is a suggestion for you to try:
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12"></div>
<div class="col-md-4 col-sm-6 col-xs-6"></div>
<div class="col-md-4 col-sm-6 col-xs-6"></div>
</div>
If you want to learn more, check out the Bootstrap grid system
This code snippet is specifically designed for Bootstrap 4 framework.
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">Box 1</div>
<div class="col-6 col-sm-6 col-md-4">Box 2</div>
<div class="col-6 col-sm-6 col-md-4">Box 3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">Box1</div>
<div class="col-xs-6 col-sm-4 col-md-4">Box2</div>
<div class="col-xs-6 col-sm-4 col-md-4">Box3</div>
</div>
</div>
Explanation:
When using Bootstrap, you can divide the page into up to 12 columns.
For small devices like mobile phones (XS), one button or widget should take up all 12 columns in a row, hence col-xs-12.
On medium devices like desktop screens, the 3 widgets/buttons should span across the whole page equally, so we use col-md-4.
I hope this explanation clarifies things.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 text-center">
<h1>1</h1>
</div>
<div class="col-6 col-sm-4 text-center">
<h1>2</h1>
</div>
<div class="col-6 col-sm-4 text-center">
<h1>3</h1>
</div>
</div>
</div>
</body>
</html>Explore More on the bootstrap 4 grid system
Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...
I wish to create a dynamic menu that appears when hovering over a user, but only if the window size is above 977 pixels. Take a look at my code below: $(document).ready(function() { $(window).on("load resize", function(event){ var windowS ...
I found a solution, but it's specifically for Nuxt.js and I'm using the Vue CLI. Is there any way to use dart sass instead of node-sass (default for sass-loader) in Nuxt.js? While the Vue CLI official documentation displays an example utilizing ...
I need some assistance with jQueryUI Resizable. How can I resize only the height of the parent div when the child div is resized and touches the bottom end of the parent div? Additionally, I want to ensure that the child div does not go outside the boundar ...
I have searched tirelessly through Google and stackoverflow, but I can't seem to find a solution to my specific problem. I need help creating a container div that can hold either one or two columns. The content is generated by a CMS and may or may not ...
Is there a method to show an error message in red until a choice is selected? ...
I have created an Angular directive to customize the file upload input. directive('ngFile', function () { return { link: function (scope, element, attrs) { var button = element.find('button[data-fileInputButton]&apos ...
I need to insert data into my database, extracted from a dynamically created table by the user with 2 columns (ID,Name) How can I retrieve each individual row that was inserted by the user and add it to the database? It's important to note that this ...
I'm dealing with a unique situation involving the Z-INDEX property. Check out my HTML setup below. <div class="player"> <div class="player-line"> <div class="player-handle"></div> <!-- /.player-handle --> </d ...
Hi there, I'm not really a developer. I've got two checkboxes in my table without any IDs. Usually, I can easily work with Selenium when elements have IDs, but in this case, the table was generated using jquery datatables and no automatic ID ass ...
Consider the following string: html_string = '<span><span class=\"ip\"></span> Do not stare <span class=\"img\"></span> at the monitor continuously </span>\r\n' I am looking to ...
Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disapp ...
Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code? Below is the current code: #nav .badges { float:left; height: 173px; width: ...
How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...
As I navigate through multiple divs, my goal is to identify those with a distinct blue border. Furthermore, if a main div possesses a blue border, I need to check for any inner divs that also have a blue border or a border width of 3px. If the main div has ...
Currently, my table's body size is set to fixed dimensions in accordance with Material UI guidelines. I am looking to implement a functionality that allows me to dynamically load more rows as the user scrolls through the table. Can you recommend the ...
Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application! As de ...
I have recently decided to replace the Jquery UI autocomplete function on my website with HTML5 datalists that load dynamic options. After researching this topic extensively, I came across various answers on Stack Overflow, such as How do you refresh an HT ...
Upon initially accessing my site after clearing the cache (a jsp page from a spring app), I noticed that the images and styles were not being applied. However, upon refreshing the page (ctrl-r), everything loaded perfectly. In Firefox's console outpu ...
I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...