Bootstrap - Use of different classes depending on the screen size - twitter-bootstrap-3

Question

<input type="submit" class="form-control">
I want to add the form-control class only when the screensize is xs. Right now form-control gets added in all screensizes. How can I make it so that form-control class only gets added when screen size is xs?

Answer 1

You could use two different inputs like so:
<input type="submit" class="form-control hidden-lg hidden-md hidden-sm">
<input type="submit" class="hidden-xs">
This will hide the form-control when its anything but xs.

Answer 2

You can use #media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
For example, to do hide sidebar id tagged div when size screen is less than 768:
#media (here is some true value...)
#media (max-width: 768px) {
#sidebar {
display: none;
}
}

Answer 3

jQuery is another way to do this by adding/removing the class based on the window width. See Docs.
*See working example at Full Screen, then re-size to view the change.
function checkWidth(init) {
if ($(window).width() < 480) {
$('input').addClass('form-control');
} else {
if (!init) {
$('input').removeClass('form-control');
}
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
body,
html {
padding-top: 40px;
padding-bottom: 40px;
}
#loginForm {
max-width: 500px;
padding: 15px;
margin: 0 auto;
background: #ddd;
}
#media (max-width: 480px) {
#loginForm {
background-color: red;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email address" />
</div>
<div class="form-group">
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Password" />
</div>
<div class="form-group">
<input type="submit">
</div>
</form>
</div>
<!-- /container -->

Answer 4

Responsive text alignment has been added in Bootstrap V4:
https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
Copied.

Answer 5

You should use both .xs and .form-control classes together as below:
.form-control.xs {/*Write your declerations.*/}