How to Make Bootstrap Responsive Design Work with Dotnetnuke

Not able to make bootstrap responsive design work with dotnetnuke

You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using a DNN container breaks the responsiveness of bootstrap bases skin

OK, Thanks for posting the Links, I understood the issue now.

The issue is with the <head> part.

Please put your responsive.css after bootstrap.css. Now its above it, So it making issue. I just changed it in DevTools and working fine.

OLD HTML

<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap-responsive.css?cdv=24" type="text/css" rel="stylesheet">
<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap.min.css?cdv=24" type="text/css" rel="stylesheet">

CHANGE IT TO

<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap.min.css?cdv=24" type="text/css" rel="stylesheet">
<link href="/dotnetnuke/Portals/_default/Skins/CQ/bootstrap/css/bootstrap-responsive.css?cdv=24" type="text/css" rel="stylesheet">

That's it. Your issue will resolve now.

Twitter Bootstrap's responsive CSS works on resized window, but not on mobile

Make sure to include the meta viewport element as instructed in Bootstrap's responsive docs so the layout will scale to the device width.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive editor?

You can try http://jhollingworth.github.com/bootstrap-wysihtml5/ . bootstrap-wysihtml5 doesnt have all the features as in FCK editor. It will be hard incorporate all the functionalities of an editor along with responsive design.

Media Queries in DotNetNuke, mobile enablement

There's a free skin available on the DotNetNuke Store that demonstrates some mobile skinning concepts. But, ultimately, you should be able to include media queries in your skin's stylesheet without doing anything special. Is there something specific that you're running up against?

You'll probably want to include a viewport <meta> tag, which you can do like this:

<%@ Register TagPrefix="dnn" TagName="Meta" Src="~/Admin/Skins/Meta.ascx" %> 
<dnn:Meta runat="server" Name="viewport" Content="initial-scale=1.0,width=device-width" />

How to avoid that a fixed bootstrap nav obscures the DNN control bar?

Try using this CSS

#ControlBar {
        height: 53px !important;
}

.navbar-fixed-top.admin {
        top: 53px;
        z-index: 9;
}

and this JavaScript

$(function() {
    if ($('form').hasClass('showControlBar')) $('.navbar-fixed-top').addClass('admin');  
});

Responsive design doesn't work on wordpress

You need to include the meta viewport element in the to tell the devices to scale the layout to the device width.

<meta name="viewport" content="width=device-width, initial-scale=1">