Bootstrap display for different screen size
Question
How set display block only for phone screen and for any other set display-inline using bootstrap 4?
My code example did not work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="d-md-inline d-lg-inline d-sm-inline d-xs-block p-2 bg-primary text-white"> TEST </div>
1 answers
solution1
0 2021-04-08 19:34:17
- bigger than 768px: inline
- smaller than 768px: block
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="d-sm-block d-md-inline p-2 bg-primary text-white"> TEST </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display divs in a different order depending on screen size in Bootstrap 3?
Bootstrap:-How to display two different images as per screen size
Bootstrap display certain row based on screen size?
How to display different layout on different screen size?
Different row > col disposition by screen size (bootstrap)
Different Screen Size bootstrap Navbar center alignment
how bootstrap layout works in different screen size
Website display differently with different screen size
Different display of font size in bootstrap cols
Bootstrap display number of elements in row based on screen size
Related Tags