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.
Related
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/
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.
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 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.
Can you please detail me the difference between
Fixed vs. Fluid vs. Elastic Layout vs Responsive layouts
I'll try to paraphrase the book "Responsive Webdesign - A. Ertel, K. Laborenz - Galileo Computing"
Fixed Layout
A layout whose dimensions are expressed in pixels and therefore incapable of adapting to different screen sizes or resolutions. If the screen is too small, a scroll bar will be shown.
Fluid & Elastic Layout
A fluid layout is defined in percent of the Viewports. When the window size changes, the dimensions of the layout change accordingly. Texts and pictures keep their size.
A mixform between the fixed and the fluid layout is the elastic layout. The element-widths are expressed in em, which depends on the font size. Therefore the layout does not change when the Window size changes, but rather when the font size changes. In priciple it's the behaviour that most browsers make available through Page Zoom (CTRL+Mousewheel).
Adaptive Layout
The adaptive layout is in principle a fixed version which exists in several versions. Depending on the available screen size it "jumps" through these versions. Between the breakpoint it behaves as a fixed layout.
Responsive Layout
The responsive Layout combines the properties of the fluid and the adaptive layout. It changes heavily upon "breakpoints" and additionally it also stretches like a fluid layout between these breakpoints. It also allows for the content to scale, i.e. pictures adapt to the available space.
Fluid, Elastic and Responsive Layouts are all same...
Only Fixed Layout is a layout in which you fix the width of the page to a given size e.g. in pixels....
Fluid Layout was width 100% and its elements arrange via the screen resolutions...
Responsive means webpage elements arrange via the screen resolutions...
Check out this sample thats fluid:-
Fluid Sample
Responsive
Reference:- Twitter Bootstrap