Using Twitter BS3 for the first time and I am trying to achieve 3 equal columns on all viewports larger than 320px wide (iPhone, lets say). On a viewport of 320 and less I want my columns to stack vertically.
Looking at the grid system in the docs, I can see that I can set the flow of the grid system by using the following classes
Max container width None (auto) 728px 940px 1170px
Class prefix .col- .col-sm- .col-lg-
The problem with the above seems to be that you can only control the layout of the columns on anything above 728 pixels. But what if I want 3 equal columns side by side on anything above 320 and not their predefined 728 pixels?
A good example of what I am looking for can be found on the Jetstrap homepage.
The three blue circles retain the side by side layout until you are on a 320 px wide viewport.
My version of this starts to stack vertically at around 728 pixels.
You could use a #media query to override how Bootstrap normally handles the "tiny" grid .col-4..
3 columns HTML..
<div class="row">
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
<div class="col-sm-4 col-4"></div>
</div>
CSS media query for less than 320px to change .col-4 to 100% width..
#media (max-width: 320px) {
.col-4 {
width:100%;
}
}
Demo: http://bootply.com/73952
Related
I'm using Foundation's grid-x which is powered by CSS flexbox.
Is there a small, simple and straightforward way to have rows and columns of responsive tiles (where the count of tiles per row is unknown) have a visual separator (e.g., a good old fashioned <hr> element) between each row? I'm using Foundation's class="row" and class="column" to render the responsive tiles.
What I'm trying to achieve is basically this: Add a horizontal line separator on rows of wrapping items but with minimal hacking of Foundation's Css or markup.
Well the simplest solution I can think of is to have a css class that has solid bottom border:
.solid-border-bottom{border-bottom: 0.25rem solid gray;}
On the above code you could change the thickness and color; based on your needs
Then in any div you want to have the <hr> effect you use this class, something like:
<div class"columns solid-border-bottom">
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.
There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/
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
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/