I'm working on a page at the moment (http://johncashin.net/test_sites/MARC_Napier_test/#) and am having an issue with the size of objects on a certain screen size.
When the user clicks on the items in the accordians, we are shown several cards of information. However on large screens, these cards are quite a bit wider than I would want, but bootstrap doesn't seem to have a class for wider screens. Ideally I would like the cards to collapse to 4 wide rather than 3, but can not find a way to do it through bootstrap. Any ideas? Bootply here. http://www.bootply.com/wVddNooKxd
For larger monitors use col-lg-4
Have a look at Shoelace, might help you out with what you're tying to achieve!
http://shoelace.io/
Related
I have a part-time job and I must code a website. I've got a graphics and graphical overview in .psd and the guy who is creating graphics told me "it is for 1140px bootstrap grid, make it in" and I don't know If I understand.. can you please help me to understand that? It looks like this:
LINK
From bootstrap's page:
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Large devices : Desktops (≥1200px)
Grid behavior : Collapsed to start, horizontal above breakpoints
Container width : 1170px
Number of columns : 12
Column width : ~97px
Practically it means that you should design it for a Desktop screen.
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
I am using twitter's bootstrap 2.3.2 to build a responsive site.
I am trying to arrange the spans correctly for when you stretch the window from tablet width (768px - 979px) to a laptop/desktop width (980px+)
In the two attached graphics, you can see what the tablet looks like and what it will look like when it is resized to a desktop width.
I know how to accomplish showing spans for only desktop .visible-desktop, but I am not sure how I would stack up the newsletter and check-in club on top of each in the 6th span/2nd row to the far right (in this case).
I've tried setting each span to span4, but it just doesn't display like it should in both views (tablet and desktop).
Any help is appreciated. I assume I might have to use some form of javascript to change spans once a certain width is reached.
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