This question already has answers here:
Bootstrap columns not working on mobile
(3 answers)
Bootstrap 4 column order not working on mobile [duplicate]
(1 answer)
`col-xs-*` not working in Bootstrap 4
(6 answers)
Bootstrap Column Not Showing on Mobile
(4 answers)
Closed 12 months ago.
I'm trying to quite simply turn a single row of 4 images (sizes are accurate in the snippet) into two columns on tablet and mobile. The issue is that it breaks into a single column with all 4 stacked.
Basically, anything smaller than desktop I want these to be two columns, so the images would scale down to accomodate the 2 column structure.
What am I doing wrong?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="team-icons row">
<div class="col-lg-3 col-sm-6 col-xs-6">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col-lg-3 col-sm-6 col-xs-6">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col-lg-3 col-sm-6 col-xs-6">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col-lg-3 col-sm-6 col-xs-6">
<img src="https://via.placeholder.com/300x70">
</div>
</div>
UPDATE:
Tablet seems to work for 2 columns but mobile shows this:
Updated the code to be col-6 (no size modifier needed), and added img-fluid class on the images so they scale with the container.
The snippet works as expected - two columns up until 992px window width.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="team-icons row">
<div class="col-lg-3 col-6">
<img src="https://via.placeholder.com/300x70" class="img-fluid">
</div>
<div class="col-lg-3 col-6">
<img src="https://via.placeholder.com/300x70" class="img-fluid">
</div>
<div class="col-lg-3 col-6">
<img src="https://via.placeholder.com/300x70" class="img-fluid">
</div>
<div class="col-lg-3 col-6">
<img src="https://via.placeholder.com/300x70" class="img-fluid">
</div>
</div>
Using Bootstrap's Grid System, you can use col-6 to start at 50% of the screen width on mobile and then col-lg-3 to bump up to 25% on desktop. I have also added the img-fluid class to your tag to make sure the images automatically adjust to your screen.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="team-icons row">
<div class="col-6 col-lg-3">
<img class="img-fluid" src="https://via.placeholder.com/300x70">
</div>
<div class="col-6 col-lg-3">
<img class="img-fluid" src="https://via.placeholder.com/300x70">
</div>
<div class="col-6 col-lg-3">
<img class="img-fluid" src="https://via.placeholder.com/300x70">
</div>
<div class="col-6 col-lg-3">
<img class="img-fluid" src="https://via.placeholder.com/300x70">
</div>
</div>
Related
I have an issue with bootstrap columns and can't seem to resolve swapping the order on smaller devices. I don't want these to stack because they stay a single row on desktop, tablet and mobile. However, on Desktop and tablet I want the row in the default order like this:
Logo Menu Button
But on phones, I simply want the first two columns swapped, like so:
Menu Logo Button
How can I achieve a simple reverse of the columns while keeping the row?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 col-xs-order-2">
Logo
</div>
<div class="col-lg-6 col-xs-4 col-xs-order-1">
Menu
</div>
<div class="col-xs-4 hidden-lg col-xs-order-3">
Button
</div>
</div>
</div>
Update:
screenshot of current result
The issue is that Bootstrap-4 dropped the order-xs class as it is the default class. If you want to apply changes for only xs-classes you have to change the roder for all elements and use order-sm--class to correct the order at sm-width:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-4 order-2 sm-order-1">
Logo
</div>
<div class="col-lg-6 col-xs-4 order-1 sm-order-2">
Menu
</div>
<div class="col-xs-4 hidden-lg order-3 sm-order-3">
Button
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
Menu
</div>
<div class="col-lg-4 col-md-4 col-xs-4 order-sm-first">
Logo
</div>
<div class="col-lg-4 col-md-4 col-xs-4 hidden-lg">
Button
</div>
</div>
</div>
I've been trying a lot of things but couldn't find the solution to my problem.
I want to align 3 different parts in a certain way for all kind of screens but col-sm and col-xs from bootstrap are not working.
I've tried this :
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
a
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
b
</div>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
c
</div>
</div>
</div>
But it only displays on the same line for large and medium screens, not on small screens.
The only way I've found to make it work was to write col instead of col-sm-4 but if I do so, I can't manipulate the grid exactly as I would like
To solve the problem when the width is less than 576px, you should apply the col-4 style.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
a
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-6 col-xl-6">
b
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">
c
</div>
</div>
</div>
This question already has answers here:
bootstrap 4 responsive utilities visible / hidden xs sm lg not working
(5 answers)
Bootstrap 4 hidden-X-(down/up) class not working
(1 answer)
Closed 5 years ago.
Starting to learn Bootstrap 4 and its responsive grid system, the code below shows my basic container class.
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
<div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
<div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
</div>
<div class="row">
<div class="hidden-sm-up col-12 box4">4</div>
</div>
</div>
The first row is working perfectly fine, however my second row I am trying to make just visible on xs screensizes. Tried looking on Bootstrap's webpage and can't see where my error is.
Use d-block d-sm-none bootstrap4.beta class. It will display the element below sm breakpoint
Stack Snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
<div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
<div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
</div>
<div class="row">
<div class="d-block d-sm-none col-12 box4">4</div>
</div>
</div>
Reference Link
I am trying to make it so on a large screen there are 4 columns, a medium screen there are 2 and on an extra small screen just 1. The large and extra small work, but I'm assuming the medium does not simply because col-6 4 times would make it 24 instead of 12 columns. Here is my code:
<div class="row">
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
</div>
How would I be able to make this work so that the medium column only has 2 columns?
You've used wrong class for medium screen size. It should be col-md-6 instead of col-med-6
And if you declare 4 columns of col-md-6, it will rearrange the columns such that the first two (total of 12) will occupy the first row and the next two will be arranged in the second row.
Your approach is correct, you only got the medium column classname wrong, it should be: col-md-6. (Bootstrap docs)
Here you go with a solution https://jsfiddle.net/8er0e3Lh/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
</div>
</div>
Order of class should be from lower screen to larger screen.
Hope this will help you.
It is col-md-6 not col-med-6. Please fix this class name, then it will work.
I'm doing on a website right now, and I need help. My website had a content that is having 5 column images for desktop and will become 4 column when it's on mobile. I am bootstrap and here's my code. Thank you.
<div class="mainBrands ">
<div class="brands">
<p>BRANDS<p>
</div>
<hr>
<div class="brandlogo">
<div class="col-md-2 col-sm-3 col-xs-3">
<img src="public/images/logo.png">
</div>
<div class="col-md-2 col-sm-3 col-xs-3">
<img src="public/images/logo.png">
</div>
<div class="col-md-2 col-sm-3 col-xs-3">
<img src="public/images/logo.png">
</div>
<div class="col-md-2 col-sm-3 col-xs-3">
<img src="public/images/logo.png">
</div>
<div class="col-md-2 col-sm-3 col-xs-3">
<img src="public/images/logo.png">
</div>
</div>
</div>
At desktop your screen will be bigger so col-md-2 are applied, bootstrap grid can add up to 12, more than 12 will be in the new row. Therefore in mobile you only seen 4 in a row (4x3 = 12), the 5th will wrap to new row.
Set all of them to 2 will fix it.
Always keep in mind that one row will be divided to 12 col. So you want 5 item, set 1st as col-xs-2 col-xs-offset-1, other 4 set to col-xs-2, that's 11 col, so and another at the end as a placeholder col-xs-1
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
REF: http://getbootstrap.com/css/#grid
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="mainBrands ">
<div class="brands">
<p>BRANDS
<p>
</div>
<hr>
<div class="brandlogo">
<div class="col-xs-2 col-xs-offset-1">
<img src="public/images/logo.png">
</div>
<div class="col-xs-2">
<img src="public/images/logo.png">
</div>
<div class="col-xs-2">
<img src="public/images/logo.png">
</div>
<div class="col-xs-2">
<img src="public/images/logo.png">
</div>
<div class="col-xs-2">
<img src="public/images/logo.png">
</div>
<div class="col-xs-1">
</div>
</div>
</div>