ASP.NET:How to make webform mobile responsive? - asp.net

I have ASP.NET project.I want it to change its view automatically when device is detected as mobile or as desktop.what are the ways available?please suggest some example projects.And i tried studying many tutos.But still i am unable to grasp them.So can any body suggest step by step method to do so?

For making your webpage responsive as per device
--> first you need to have bootstrap in your project.
--> you will be having container in your bootstap.css file(assets-->css-->bootstap.css).
--> container will be having different kind of screen types declared by default.like
EXAMPLE:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
--> you have to use these container in your cs file.In asp.net it is .aspx extention file.for
EXAMPLE:
<div class="below-slideshow" style="padding-bottom: 0px">
<div class="container"> <!-- NOTICE HERE:inside div declare class as container/container-fluid-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<h1 class="head-line">Dashboard</h1>
</div>
</div>
</div>
</div>
</div>
--> To know more about container and container fluid http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
HAPPY CODING :-)

Related

Change css if bootstrap col are not horizontal

I have a simple bootstrap layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="upper"></div>
</div>
<div class="col-sm-4">
<div class="lower"></div>
</div>
</div>
</div>
css
.upper {
height: 100%;
width: 100%;
}
.lower {
height: 100%;
width: 100%;
}
if the screen is sm, the upper div will be ontop and the other below it. Each filling 100% width and height. However, it'd like upper to only have a 80% height if the screen is sm. Are there some way to work this out in bootstrap? Or some other smart way with jquery perhaps.
you can add xs class in each div after sm or you can do it with media query also
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-xs-8">
<div class="upper"></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="lower"></div>
</div>
</div>
</div>
or
#media only screen and (max-width: 768px) {
.upper {
height: 80%;
width: 80%;
}
.lower {
height: 80%;
width: 80%;
}
}
You could do this with a responsive CSS media query:
#media (min-width: 768px) {
.upper {
height: 80%;
}
}
This would sort of make sense with your existing CSS, as Bootstrap favors a mobile-first approach to development. Your existing CSS rule for .upper would kick in for extra-small (xs) viewports only, and when the viewport is stretched out (to small/sm), this rule would overwrite your xs rule.

Div placement even in a single parent and move the other div to the middle

<div class="sidebar">
<div class="title"></div>
<div class="related"></div>
</div>
<div class="description"></div>
As you can see, there are 2 parent divs, sidebar and description, and 2 child divs within sidebar. I have given css rules for them and looks like this picture below :
Question : how can I make the view like this with those markup without change the markup ? :
*Note : the second will be view if the window's width <= 320px. I have used #media query but the problem is, title and related are within the one parent (sidebar), so it was difficult for me to make them separated and move description in the middle of them.
Thanks
This might not be a smart way, but the code below could be a solution for your problem:
HTML:
<div class="sidebar">
<div class="title"></div>
<div class="description2"> description ...</div>
<div class="related"></div>
</div>
<div class="description"> description ... </div>
CSS:
.description2{
display:none;
}
#media only screen and (max-width: 320px) {
.description{
display:none;
}
.description2{
display:block;
}
}
Hope this helps.
I don't think it can be done keeping the two divs within the sidebar (without using javascript). However you can do it like this which makes more sense to me, as it places the description immediately after the title.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Media query</title>
<style>
.title,
.description,
.related {
background-color: #333;
margin: 5px;
}
#media only screen
and (min-width : 620px) {
.holder {
width: 620px;
}
.title {
float: right;
width: 200px;
height: 200px;
}
.description {
float: left;
width: 400px;
height: 600px;
}
.related {
float: right;
width:200px;
height: 390px;
}
}
</style>
</head>
<body>
<div class="holder">
<div class="title"></div>
<div class="description"></div>
<div class="related"></div>
</div>
</body>
</html>

Bootstrap 3: pull-right for col-lg only

New to bootstrap 3.... In my layout I have:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right">
elements 2
</div>
</div>
</div>
I would like the 'elements 2' to NOT be aligned right on smaller than col-lg screens. So effectively having the class pull-right only for col-lg-6...
How could I achieve this?
Here is a fiddle: http://jsfiddle.net/thibs/Y6WPz/
Thank-you
You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:
<div class="row">
<div class="col-lg-6 col-xs-6">elements 1</div>
<div class="col-lg-6 col-xs-6">
<div class="row">
<div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
<div class="pull-right">elements 2</div>
</div>
</div>
</div>
</div>
Demo: http://bootply.com/88095
Another option is to override the float of .pull-right using a #media query..
#media (max-width: 1200px) {
.row .col-lg-6 > .pull-right {
float: none !important;
}
}
Lastly, another option is to create your own .pull-right-lg CSS class..
#media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
UPDATE
Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right. No extra CSS is needed.
Bootstrap 4 Demo
Try this LESS snippet (It's created from the examples above & the media query mixins in grid.less).
#media (min-width: #screen-sm-min) {
.pull-right-sm {
float: right;
}
}
#media (min-width: #screen-md-min) {
.pull-right-md {
float: right;
}
}
#media (min-width: #screen-lg-min) {
.pull-right-lg {
float: right;
}
}
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
float: right;
}
.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
float: left;
}
#media (max-width: 767px) {
.pull-right-not-xs, .pull-left-not-xs{
float: none;
}
.pull-right-xs {
float: right;
}
.pull-left-xs {
float: left;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.pull-right-not-sm, .pull-left-not-sm{
float: none;
}
.pull-right-sm {
float: right;
}
.pull-left-sm {
float: left;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.pull-right-not-md, .pull-left-not-md{
float: none;
}
.pull-right-md {
float: right;
}
.pull-left-md {
float: left;
}
}
#media (min-width: 1200px) {
.pull-right-not-lg, .pull-left-not-lg{
float: none;
}
.pull-right-lg {
float: right;
}
.pull-left-lg {
float: left;
}
}
There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering: http://getbootstrap.com/css/#grid-column-ordering
The syntax for the class is col-<#grid-size>-(push|pull)-<#cols> where <#grid-size> is xs, sm, md or lg and <#cols> is how far you want the column to move for that grid size. Push or pull is left or right of course.
I use it all the time so I know it works well.
Works fine too:
/* small screen portrait */
#media (max-width: 321px) {
.pull-right {
float: none!important;
}
}
/* small screen lanscape */
#media (max-width: 480px) {
.pull-right {
float: none!important;
}
}
Adding the CSS shown below to your Bootstrap 3 application enables support for
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right
classes that work exactly like the new
float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right
classes that have been introduced in Bootstrap 4:
#media (min-width: 768px) {
.pull-sm-left {
float: left !important;
}
.pull-sm-right {
float: right !important;
}
.pull-sm-none {
float: none !important;
}
}
#media (min-width: 992px) {
.pull-md-left {
float: left !important;
}
.pull-md-right {
float: right !important;
}
.pull-md-none {
float: none !important;
}
}
#media (min-width: 1200px) {
.pull-lg-left {
float: left !important;
}
.pull-lg-right {
float: right !important;
}
.pull-lg-none {
float: none !important;
}
}
.pull-none {
float: none !important;
}
Apart from that, it adds
pull-{ε|sm-|md-|lg-}none
for completeness, being compatible with
float-{ε|sm-|md-|lg-|xl-}none
from Bootstrap 4.
For those interested in text alignment, a simple solution is to create a new class:
.text-right-large {
text-align: right;
}
#media (max-width: 991px) {
.text-right-large {
text-align: left;
}
}
Then add that class:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right-large">
elements 2
</div>
</div>
It is very simple using Sass, just use #extend:
.pull-right-xs {
#extend .pull-right;
}
This is what i am using . change #screen-md-max for other sizes
/* Pull left in lg resolutions */
#media (min-width: #screen-md-max) {
.pull-xs-right {
float: right !important;
}
.pull-xs-left {
float: left !important;
}
.radio-inline.pull-xs-left + .radio-inline.pull-xs-left ,
.checkbox-inline.pull-xs-left + .checkbox-inline.pull-xs-left {
margin-left: 0;
}
.radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
margin-right: 10px;
}
}
This problem is solved in bootstrap-4-alpha-2.
Here is the link:
http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/
Clone it on github:
https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2
Just use bootstrap's responsive utility classes!
The best solution for that task is to use the following code:
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6 text-right">
<div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
elements 2
</div>
</div>
</div>
Element will be aligned to the right only on lg screens - on the rest the display attribute will be set to block as it is by default for div element.
This approach is using text-right class on the parent element instead of pull-right.
Alternative solution:
The biggest disadvantage is that the html code inside needs to be repeated twice.
<div class="row">
<div class="col-lg-6 col-md-6">elements 1</div>
<div class="col-lg-6 col-md-6">
<div class="pull-right visible-lg">
elements 2
</div>
<div class="hidden-lg">
elements 2
</div>
</div>
</div>
You can use push and pull to change column ordering. You pull one column and push the other on large devices:
<div class="row">
<div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
<div class="col-lg-6 col-md-6 col-lg-push-6">
<div>
elements 2
</div>
</div>
</div>
now include bootstrap 4:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');
and code should be like this:
<div class="row">
<div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
<div class="col-lg-6 col-md-6" style="border:solid 1px red">
<div class="pull-lg-right pull-xl-right">
elements 2
</div>
</div>
</div>

How to get right sidebar up on main content on resize of flexible with page?

I have page with main content and right sidebar. But I want to have sidebar before main content block on page resize. How can I accomplish this?
HTML part:
<div id="header">
<div id="logo"></div>
</div>
<div id="container">
<div id="content">
main content
</div>
<div id="sidebar">
sidebar
</div>
</div>
<div id="footer">
footer
</div>
CSS part:
#container {
clear: both;
overflow: auto;
}
#content {
clear:both;
width: 70%;
float: left;
padding: 2% 0;
margin-right: 2%;
}
#sidebar {
width: 28%;
float: right;
padding: 2% 0;
}
In your media query float your #sidebar left and your #content right.
Because you are trying to do responsive design, what you want to do is media query in your CSS that will allow you to style the changes you want to make. The first decision you have to make is which screen sizes you want to display the responsive design. Tablets usually have a max-width of 760px and phones are around max-width of 480px. So the media query will look something like this:
CSS:
#media screen and (max-width: 480px){
...all your mobile styles are in here...
}
Now to answer the positioning issues you have. Of course there are several ways, the way I would do it is this is to move your sidebar above the content in the HTML, remove the clear from the content CSS, and inside the media query all you have to do is make the width for both divs 100%.
HTML:
<div id="header">
<div id="logo">The logo</div>
</div>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="content">
main content
</div>
</div>
<div id="footer">
footer
</div>
CSS:
#container {
clear: both;
overflow: auto;
}
#content {
float:left;
width: 50%;
background:grey;
}
#sidebar {
width: 25%;
float:right;
background:lightgrey;
}
#media screen and (max-width:480px){
#sidebar {
width:100%;
}
#content {
width:100%;
}
}

Bootstrap, making responsive changes to layout

I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
With bootstrap 2.0.2 and up you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
To reclaim that space and re-span the span8, add this to your css:
#media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
If you happen to be using less you can use bootstrap's grid mixins:
.span12-tablet {
#media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
Using a media query with whatever min/max width set .span4 to display: none;
Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
#media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
#media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
If using bootstrap 2.2.1 you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
#media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (#fluidGridColumnWidth * 6) + (#fluidGridGutterWidth * (6 - 1)) - (.5 / #gridRowWidth * 100 * 1%);
float: left;
margin-left: #fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Write Like this
in phone device this div will hide<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
Update
Previous Answer for Bootstrap 2.3
Now bootstrap 3 come in market..
so i update my answer for new user → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
TLDR: Use the 2nd code snippet
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Starting from the smallest breakpoint (xs - extra small), the span4 is hidden and the span8 takes all of the width (all 12 columns)
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4 take a third of the width (12 columns/3 = 4 columns) and the span8 will take the rest of the width (12-4= 8 columns)
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
Further reading:
If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4 on breakpoints medium and up (>992px)
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
I came up with a small variation of that.
Add stack-tablet class to a row-fluid to make the spans stack on tablet width, not only on phone width (bootstrap default):
#media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
just:
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>

Resources