CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Iwan
Iwan

Reputation: 31

Targeting Multiple Devices using Bootstrap 3

i am developing website that targeting on phones, tablets and desktops. Let's say i have a div element. What is the good way to handle these devices, should i have 3 different version of codes or maybe i just have to include all the class in one div like this :

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">Content</div>

Thank you.

Upvotes: 2

Views: 3640

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362610

Just like your example, with Bootstrap you can use the multiple col-* classes in a single DIV. The smaller grid classes also apply to larger screens unless overriden specifically for larger screens. Therefore, you only need to use the class for the smallest device width you want to support. Smaller widths than 768 pixels always stack vertically (12 columns) unless you use the xs classes

  • xs - for less that 768 px
  • sm - for 768 px and greater
  • md - for 992 px and greater
  • lg - for 1200 px and greater

Examples...

12 columns wide on all devices: (you don't need sm,md,lg unless you want different widths on each device)

<div class="col-xs-12">Content</div>

6 columns wide on desktop(lg), laptop(md), tablet(sm), 12 columns on phone(xs):

<div class="col-sm-6">Content</div>

6 columns wide on on all devices:

<div class="col-xs-6">Content</div>

4 columns on lg and md, 6 cols on sm and xs:

<div class="col-md-4 col-xs-6">Content</div>

Demo with more examples: http://www.bootply.com/73778

Upvotes: 6

madhu kumar
madhu kumar

Reputation: 810

Prepare ur website for Desktop and use this metatags. 

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1.0">

col-xs-12 is to make content get fitted for one single row. Bootstrap makes ur content to fit in different devices automatically when u include bootstrap.css in ur project.

Upvotes: 0

Related Questions