i'm trying to create a portfolio kind of style layout, with different widths for the columns.
The issue i'm having is that the layout breaks in the row that has a 5col div on the left and a 7col on the right.
When it's the other way around (7col | 5col) it seems to work fine. That's a weird behaviour.
Does anyone know why this might be happening?
To demo this bug, just resize your window.
http://codepen.io/anon/pen/lqsgC
Cheers,
Thales Macedo
It doesn't exactly "break", what happens is actually intended behavior.
You are using the .col-md-* which means that columns will be formed only if the viewport is "medium" as defined by TBS3. Otherwise, they will stack. This is what you are observing because resizing the window eventually leads to a small (or extra-small) viewport and the columns will display stacked.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
If you would like for the columns to always show up, you need to use .col-xs-* instead.
Related
I have a website with a section with 3 columns, it's responsive and the columns switch from horizontal layout on desktop to being stacked vertically for mobile. This is fine but I have a problem where the columns become different heights from each other if the user changes the font size in their browser. Is there a way to force the column heights to remain even?
Here is the site:
http://www.1wevents.com/
It's the about us section. It's really, really annoying me. I guess I can add media queries to switch to vertical stacking earlier before the screen gets as small as mobile but is there a way to switch based on the font size in the browser?
Many thanks,
Tony
Here are pictures of the buttons. I wanted the buttons to show up together because without columns they were dropping down to a new line and it looked ugly. Now it works on browser, but not on mobile. I'm sure this is because I defined 3 columns and mobile doesn't have room. But when the browser resizes it moves the buttons accordingly. How do I get it to do that on mobile?
Browser:
Mobile:
Here is the code I used:
<div class="row">
<div class="col-xs-4">Online Reputation</div>
<div class="col-xs-4">Review Management</div>
<div class="col-xs-4">SEO & Web</div>
</div>
On mobile devices, the available width to display elements is usually too narrow to have multiple in the same row while still keeping their texts readable (ie. Not truncated, heavily shrunk down, or wrapping within themselves).
The most common solution to this problem is to display the elements side-by-side when there is available space to do so, but start to stack them after the screen shrinks below a certain width (by styling them using media queries). This is a key part of responsive design, since desktop layouts rarely translate properly to mobile devices. (See Changing the Page Layout Based on Breakpoints for more details on this.)
Bootstrap has breakpoints built into the framework, so there's no need to do any extra work for it. You have the options of xs, sm, md, and lg, which correspond to predefined ranges of screen widths.
You've already used the xs breakpoint in col-xs-4, which basically means that at every possible screen width, the buttons should be 4 units wide. But this doesn't display properly on narrow mobile devices, as you've noticed - so your next option is to go one width higher and use col-sm-4. Doing so would preserve the 4 unit width at any screen width of sm and above, but would stack the buttons once the screen narrows to the xs range:
<div class="row">
<div class="col-sm-4">Online Reputation</div>
<div class="col-sm-4">Review Management</div>
<div class="col-sm-4">SEO & Web</div>
</div>
Here's a demo to show you how that looks. Hope this helps! Let me know if you have any questions.
You need to change text size to something smaller and or less padding of the buttons for it to fit on mobile. Where is your CSS?
Maybe this is a very simple question, but I am wondering if you can setup multiple layouts based on window size, and have them apply based off the users current window size?
Right now I use bootstrap with C# and I set one standard size like col-md-#, and then let everything below that just fall apart into pieces as elements start overlapping. This makes the site at least readable on small screens but it is still a mess since everything is all broken apart.
Example md/lg layout
moving to a smaller screen (sm/xs) then breaks those elements into pieces, which cascade vertically.
What I am wondering is if I can maybe setup a col-xs/sm-12, and then re-arrange the elements (or re-size items like images/tables/divs) to better suite a smaller screen. Basically have/display different layouts when moving from different screen sizes.
Is it possible that instead of just breaking the elements apart (like above) for smaller screens, to in fact run a different style for smaller screen sizes (below)?
TLDR: Does bootstrap currently support multiple layouts that are determined by window size, rather than having just one layout, and breaking everything apart for anything smaller?
If so, can a simple example be given showing two layouts being enacted by different window sizes.
Yes.
If your using bootstrap 3, you can simply define the layout for xs, which will then scale up until something bigger takes over.
for example
col-xs-6 col-md-12
col-xs-6 col-md-12
col-xs-12
col-xs-12
So when its on xs, it will display as 6 columns, then medium up will display on 12 columns.
The above is better described here http://getbootstrap.com/css/#grid
you can also use push/pull to adjust the ordering http://getbootstrap.com/css/#grid-column-ordering
This is a tricky one. I have built a website using bootstrap and its brilliant. Brilliant for mobile/tablets. When it comes to desktop that's where the problem kicks in.
When the browser size is eg. 1000px (width of the body) then the site looks how it should. When the browser window is resized and is smaller, once it passes the sizes for tablet eg767px then the layout changes to make everything responsive.
Is there a way to keep the layout of the website exactly the same no matter what the window size, whilst being able to use bootstraps grid system?
Did you try the new grid options?
Especially .col-xs-* should help you.
Here is a little example from the docs.
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
You can use the media query #media handheld which is, theoretically, used only by handheld devies (phones and tablets).
See http://www.w3.org/TR/CSS2/media.html
If that doesn't work (because the phones aren't cooperating), you can substitute things like max-device-width for max-width, because browsers on phones are usually displayed full screen.
Of course there are always tablets that have the same screen size as a desktop monitor and that use windowed browsers like a desktop computer, but for those machines, do you still want to treat them differently than desktop computers?
As mentioned by #tim-bartsch the xs (extra small) grid class col-xs-* will act the same on every screen size. This will be describe in more detail at http://getbootstrap.com/getting-started/#disable-responsive.
If your layout also use a Navbar the above maybe don't help you. The instruction for this seems a little cryptic:
If using navbars, remove all navbar collapsing and expanding behavior.
In this case you could also try: https://github.com/bassjobsen/non-responsive-tb3
I'm building a site with Bootstrap. There are times when I want the grid to collapse in phone mode, but sometimes I don't - the top menu is a bar, for instance, which contains a couple of items in a row. And I want them to stay floated while in phone mode, not collapse on top of each other which is the default behavior for a ".row-fluid" grid.
Is there a built-in way of accomplishing this, like a non-responsive grid in all resolutions? Or will I have to roll my own?
I know this is old, but it comes up in a google search and I found the answer...
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns.
From here http://getbootstrap.com/css/#grid-example-mixed