24541

is possible to change background color using bootstrap

Question:

I'm using bootstrap, and currently full page is white background as default. I was wondering if that possible to change background color to gray when using mobile under bootstrap! like "class="col-sm-6" col-xs-6"...

does is possible how to write that code in jquery to automatic to change background color to gray color when come to use mobile and if using desktop change stay background color to white as default.

Answer1:

This is definitely possible, but doesn't require you to use jQuery at all. In a CSS file, simply add a background attribute to those classes - it might look something like the following:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { background: #999; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { background: #fff; }

Alternatively, you could use media queries to change the body background at certain sizes. For example, to make the body gray only when the screen in small, you could use:

body { background: #fff; } @media all and (max-width: 768px) { body { background: #999; } }

Answer2:

Using jQuery:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // If they are using mobile device $("col-sm-6").css("background-color", "Grey"); } else { // If they are on a deskop $("col-sm-6").css("background-color", "White"); }

Recommend

  • Unmarshalling works incorrectly: javax.xml.bind.UnmarshalException: unexpected element
  • Selecting multiple elements with Selenium
  • How create references between elements in XML
  • Root element minOccurs or maxOccurs
  • How to prompt user that edits have been made upon changing pages or sorting in Kendo Grid
  • How to distribute an event to all nodes in a (Wildfly) cluster?
  • How can I determine which routines MATLAB uses to solve a sparse matrix?
  • Meteor.. accounts- password— Create account on client without login
  • (Play 2.5) How do you define json format for type alias of an Option?
  • Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?
  • IE6 changes DOCTYPE to a bad one
  • Sensibility of combined Maven/Ant+Ivy build management for dual platform Desktop/Android deployment?
  • MS Access - How to change the linked table path by amend the table
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • WPF ICommand CanExecute(): RaiseCanExecuteChanged() or automatic handling via DispatchTimer?
  • How solve “Qt: Untested Windows version 10.0 detected!”
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Android full screen on only one activity?
  • Email format validation in mvc3 view
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • HTML download movie download link
  • How to add date and time under each post in guestbook in google app engine
  • Window Size for Mac application
  • Javascript Callbacks with Object constructor
  • How can I use Kendo UI with Razor?
  • jQuery tmpl and DataLink beta
  • WOWZA + RTMP + HTML5 Playback?
  • How to disable jQuery.jplayer autoplay?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Angular 2 constructor injection vs direct access
  • coudnt use logback because of log4j
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Android Google Maps API OnLocationChanged only called once
  • How can I remove ASP.NET Designer.cs files?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal