The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382
Related
I am using Meteor and Semantic-ui 2 and can't get the stackable grid to work on mobile (iPhone 6). When I resize my computer screen everything works fine but not on the mobile. On the mobile I have 3 columns and space on the sides (just as a large screen). It should be stacked in one column and use 100% of the screen. As I can understand mobile is defined as below 768px and iPhone6 is 750px. Do anyone have any suggestions or answers to solve this?
<div class="ui three column stackable grid container">
<div class="four wide column"></div>
<div class="nine wide column"></div>
<div class="three wide column"></div>
</div>
Just figured it out as I asked a question on gitter.im
Since the header markup is mainly handled by Meteor I forgot to add the
<meta name=viewport content="width=device-width, initial-scale=1">
I added it in my layout template as I am using Iron Router at the top of the page and it worked
The problem is this:
I have a form which links to a database via javascript. I can only have one instance of this form on the page.
Above the laptop size break point, there should be just the form on the page. Below that on tablet and phone, it should be the accordion, collapsed.
How do you set up the accordion to exist around the form, only when in the smaller view sizes? The form is bootstrap responsive already.
If you want to hide the bar on large and medium screens, just add this 2 classes on the heading div
<div class="panel-heading hidden-md hidden-lg"></div>
I'm using bootstrap 3 and AngularJS and I have two column fluid layout.
The two columns are declared like so -
<div class="chart col-md-8">...</div>
<div class="options col-md-4">...</div>
If the user's browser window is less than a certain width, or if they resize it to less than a certain width, I want to hide the options column and make the chart column take up the full width of the screen. How would I do this?
Look here:
Responsive Utilities
If you add the .hidden-xs class to the options div it won't be visible for extra small devices (<768px). Find the appropriate class for your usage. You can use a single or a combination of the available classes for toggling content across viewport breakpoints.
<div class="options col-md-4 hidden-xs">...</div>
Bootstrap provides specis helper classes for this. So for your situation it can be:
<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
It means that when xs media query is triggered .options column will be hidden and .chart will expand to full width (12 cols).
<div class="chart col-md-8 col-xs-12">...</div>
<div class="options col-md-4 hidden-xs">...</div>
Now the chart becomes full width when the sceen is less that 768px wide
In the CSS file you can hide the chart div for a specified max-width of a screen:
#media ( max-width : 768px) {
.chart {
display:hidden;
}
}
you can set the desired max-width to hide the chart in pixels.
However, you can use the standard bootstrap classes to hide anything you want for many devices.
For example:
class="chart hidden-xs" hides it from extra small devices, like
mobiles.
class="chart hidden-sm" hides it from small devices, like
tablets.
class="chart hidden-md" hides it from medium devices, like
13" laptops.
class="chart hidden-lg" hides it from large devices, like normal 15.9" devices.
How to implement mobile only or desktop only view inside a main menu in Semantic UI? Will the Responsive to Device feature only works with rows and columns as stated in Semantic UI Grid? Can any one please advice me on how this can be achieved with Semantic UI or should I use javascript to do the same?
Add HTML classes to Menu also
Working Demo
HTML
<div class="ui inverted menu grid">
<div class="mobile only row">...</div>
<div class="tablet only row">...</div>
<div class="computer only row">...</div>
</div>
For padding issue, Ovrride CSS with the below class
.ui.menu.grid>.computer.only.row {
padding:0;
}
I'm sorry if this is a simple question, but this is my first time using bootstrap. I'm having an issue with the way my site appears in mobile devices when they are horizontal. There is a huge amount of space on the either side of one section. Please see the picture:
This only seems to be an issue between the sizes of 320 and 768. Anything smaller and the space is gone, anything larger and it appears in one line. I would really appreciate any direction as I'm not sure which section I would need to change in order to even get started messing with things.
Please read about Twitter's Boostrap's grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Every row (class row-fluid) contains 12 columns. Below 768 pixels screen width colums stack.
You can use the span* classes to split your blocks of colums.
Example:
<div class="container" id="firstrow">
<div class="row-fluid">
<div class="span6">Content 1</div>
<div class="span6">Content 2</div>
</div>
</div>
Above 767 pixels Content 1 en Content 2 will show next to each other. Below the 768 pixels they will show under each other (stacked).
If you don't want the columns stack between 320px and 768px you could use media queries. With the example code above:
#media (min-width: 320px) and (max-width: 767px)
{
/* Styles */
#firstrow div.span6{ display: block; float: left; width:48.9362%;}
}
When using Twitter's Bootstrap 3.x
Twitter's Bootstrap 3 got a small 12 columns grid too. You could use a special col-small-span-* class for this. Also mention
the span* classe are renamed to col-span-*:
<div class="col-span-4 col-small-span-6">
See: Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
To set the stacking point at 480px you will have to recompile yours css. Set #screen-small to 480px; and define your cols with: after that. Note this will change #grid-float-breakpoint also cause it is defined as #grid-float-breakpoint: #screen-tablet;.
see also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/