I am first time working on responsive site in Bootstrap and I am not able to decode classes like hidden-sm or visible-md etc.
Does hidden-sm mean to hide that particular DIV?
The answer to your question is yes. If the div is added to the .hidden-sm class it will hide that particular div in a screen size of 768px.
If an element is of the class .visible-* it means it's visible for that screen size or above.
Example:
.visible-xs shows only in screen sizes <768px
.visible-sm shows only in screen sizes < 992px
.visible-md shows only in screen sizes < 1200px
.visible-lg shows in screen sizes 1200px and above
On the flip side you can accomplish the same with .hidden class with the other sizes.
If an element is of the class .hidden-* it should be hidden for that specific screen size range
Example:
.hidden-xs hides the element in screen sizes of <768px
.hidden-sm hides the element in screen sizes of 768px
.hidden-md hides the element in screen sizes of 992px
.hidden-lg hides the element in screen sizes of 1200px
hidden-xx means that make particular section hidden in a screen size of xx
You may find more information here in bootstrap documentation
http://getbootstrap.com/css/#responsive-utilities-classes
Related
Developing responsive design, using bootstrap 3, met next problem:
On 767px BS menu looks good, but on 768px I see content of menu, that used to be hidden in "hamburger", over BS menu container.
And "hamburger" is hidden now.
good(767px width)
bad(768px width)
Is there any good solution for still showing "mobile" menu type on "tablet" display width ?
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I want a background image to always be aligned with the bottom of the screen regardless of screen size, iOS Version, or Personal Hotspot messages etc. But none of the interface builder alignment options seem to work in every case.
I have 2 different sized images to fit 3.5' and 4' retina which change via code but their alignment is always thrown off by 'Personal Hotspot' and other messages changing the size of the parent view.
My images are the size of the screen and should fill the whole screen always. There is a black area where tab bar and status bar will overlay.
There are buttons aligned with the background and everything gets thrown out by messages that resize the parent view.
I want the bottom of the UIImageView to be aligned with the bottom of the screen always.
have you tried the contentMode property?
theImageView.contentMode = UIViewContentModeBottom;
There is also a menu item for this in interface builder if you prefer to set it there.
then if you are using auto layout, simply add a bottom space constraint from your image view to the bottom layout guide.
If you're not using auto layout, a fixed bottom margin on the autoresizing mask should do the trick.
<div class="col-lg-1">hi</div>
<div class="col-lg-10">hi</div>
<div class="col-lg-1">hi</div>
v/s
<div class="col-xs-1">hi</div>
<div class="col-xs-10">hi</div>
<div class="col-xs-1">hi</div>
From what i'm seeing if you use .col-lg- to define the grid system in an app. For smaller screen sizes the app does not hold up. So much so, that even if you magnify the browser by ctrl +, the width becomes 100% of each .col-lg- div.
On the contrary if you use .col-xs- the behavior is as expected (great) on large screen sizes also. (so far as i've seen). Is there any drawback of using .col-xs- or .col-md- grid system for a web app? (even when it is intended for large screen sizes also)
unexpected behavior and expected behavior just because the screen size of the fiddle is smaller than .col-lg can handle. So it makes each div 100% width
The large grid (with .col-lg) only becomes horizontal with a screensize of >=1200. The extra small grid (with .col-xs) always remain horizontal (and never stack).
if you magnify the browser by ctrl +, the width becomes 100% of each
.col-lg- div.
True cause ctrl + doesn't change the screen size.
Is there any drawback of using .col-xs- or .col-md- grid system for a
web app?
No. The col-xs will be the same for all screen sizes. In fact only using col-xs makes your app non-responsive. (When you use a navbar you will also set the #grid-breaking-point to 0).
In your case the medium grid .col-md will have the same "unexpected behavior" (unexpected for you) but for an screen size of >= 992 pixels.
I want to show DIV element on Panel with height equal to half size of visible area of the panel. There is no problem with resize. But how can I get sizes of visible area of the panel (without titlebars & toolbars)?
Ok, I have found only one way to do that.
You can find element with class x-scroll-container in current view. Sizes of this element will be the sizes of visible area.