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
Related
I am creating a website, i am beginner in web design i want to create a design of category to be showed 4 cards in desktop and 2 card in mobile view.
My code below
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="categories-main">
<div class="container bg-light rounded">
<br>
<div class="h4 font-weight-bold text-center py-2">Categories</div>
<br>
<div class="row">
<div class="col-lg-3 col-md-6 my-lg-2 my-2">
<div class="box bg-white">
<div class="d-flex align-items-center">
<div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="#" alt=""> </div>
<div class="d-flex flex-column"> <b>Public Speech</b>
<a href="#">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br> Categories
<br>
I tried a lot of changes but didn't get what i want.
I expect from developers to help in this.
Refering to bootstrap documentation, max columns numbers are 12.
So you need to make col-6 col-6 for mobile (will make 2 columns (12/2 = 6)) and for desktop col-3 col-3 col-3 col-3 (will make 4 columns (12/4 = 3)).
See simplified example below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-red">
1
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-blue">
2
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-green">
3
</div>
</div>
<div class="col-6 col-lg-3 my-lg-2 my-2">
<div class="box bg-black">
4
</div>
</div>
</div>
You have 12 columns by default.
You can write something like this <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
12/3 = 4 in a row when screen is xl
12/4 = 3 in a row when screen is lg
12/6 = 2 in a row when screen is md
12/12= 1 in a row when screen is sm
You can customize the columns depending on the devices as you want. :)
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>
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>
I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset?
This is my code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
Use ml-auto instead of offset-md-1 it works perfect for you.
try this code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
I hope this will works perfect for you.
Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.
Thank you...
There is no *-xs-* classes in bootstrap-4. Use col-12 instead.
`col-xs-*` not working in Bootstrap 4
Ther are three ways to add space between columns.
margin-x on .col-*
padding-x on .col-*
justify-content-between on .row
Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.
The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.
offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
offset-md-1
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 mr-auto bg-primary">
mr-auto
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
ml-auto
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
justify-content-between
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
justify-content-between
</div>
</div>
</div>
If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.
#media (min-width: 768px) {
.ml-md-0_5 {
margin-left: calc((100% / 12) / 2)
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
ml-md-0_5
</div>
</div>
</div>
Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.
As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example