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
I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...
I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...
I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. Here is the demo link: . When the second div is clicked, why does the third div slide? How can this prob ...
I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...
I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...
Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...
Hey everyone, I recently made a post but it seems like my explanation was not clear enough. So here's the issue - I have a products page with a URL structure like http:.......rest_id=3/area='Enfield'. I've been using a similar query on ...
Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...
I have a database containing HTML code for a table. I would like to display this code in its original form within a textarea so that I can edit it. However, when I try to echo the code, it appears in compiled form as a table rather than the original HTML ...
I've been struggling to parse utf-8 using jsoup. I've tried everything I know and even searched on Google. My goal is: String tmp_html_content ="Öç"; InputStream is = new ByteArrayInputStream(tmp_html_content.getBytes()); Documen ...
When using jQuery Mobile, links are styled according to the theme stylesheet. If you want to change this styling, you can use !important as follows: .glossaryLink{ color: white !important; background-color: #CC8DCC; } I am looking to dynamically cha ...
Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...
Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...
I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...
Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...
I recently created a custom directive called ng-file-chosen, which is supposed to capture the selected file name from an <input> element and bind it to the ng-model passed in. In the code snippet below, the result of ng-file-chosen is linked to mode ...
I am currently working with Angular 8, Angular Material, and Bootstrap utilities. Below is the code snippet I have been using: <div class="p-1 text-break" *ngSwitchDefault [innerHTML]="cell.value | longText"& ...
Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...
I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this? Relevant Code <for ...
Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...