It's been a long time since I've worked on any web projects and even longer since I've built something from scratch so I'm very new to CSS grid systems such as the one included in Bootstrap 3. I'm building a website and perhaps the largest part of the challenge is learning to think in terms of the mobile first grid system.
I'm working on a header that works in much the same way as the header on the New Yorker webzine or to put it descriptively it is fixed width, has a site branding (image) centred above a navbar on medium and large devices. Below medium the navbar collapses and moves to the same row as the branding (on the far-left) and the search icon moves to the far-right on the same row. So to visualise:
Medium/Large Devices:
BRANDING
NAVBAR - SEARCH
Small/Extra Small Devices:
NAVBAR(COLLAPSED) - BRANDING - SEARCH
I'm not so much interested in having my hand held where the code is concerned, but a description of how that can be achieved using the B3 grid system.
Thank you in advance for your help.
Flexbox will be your bestfriend for this.
However for Bootsrap you can reorder columns using classes like .col-md-push-* and .col-md-pull-* to shift a column to the right or left, respectively. This would become relevant in your media queries (pulling the brand column into the middle) to achieve what you're looking for :)
For an intro to Flexbox I recommend:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexbox.io/view/qWL-7ih9Kw0
For a great overview of the bootstrap grid system check this out:
http://www.sitepoint.com/understanding-bootstrap-grid-system/
Related
I have to make a checkerboard homepage with several div's containing pictures and text.
I made something like this :
In the CSS, all blocks are placed with an absolute position and some top, left properties (in px).
The design is correct, but I want to make all this responsive, but in 2 different ways :
1 - Adapt all the body to the screen and eventually increase the font-size property.
2 - Simply align all the blocks in two or one column(s) (for smartphones for example)
I don't want an answer with a ready-made code, just help to realize the responsive version of my homepage.
You should really look into using a CSS framework rather than relying on absolute positioning, which is difficult to adapt for use with multiple screen sizes and make responsive.
Although there is a learning curve when first attempting to use a CSS framework, it quickly pays dividends, especially when taking into account cross-browser and responsive-design considerations.
Probably the most popular CSS framework is Bootstrap, which is responsive by default, and would make producing your layout relatively simple.
Another good option for a CSS framework is Foundation.
There are countless others. Here's a list: http://usablica.github.io/front-end-frameworks/compare.html
I used to realize the responsive with the float columns and change the columns' width through media query. But in your job, you should change the hope wrapper's width and reset the columns' left and top through js. You can consult the plugin 'Masonry', which may help you.
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/
If you have a designer that is not specifically designing a PSD(mockup) around bootstrap column sizes how do you make the two fit ? It seems to me the options are :
1. Generate a Custom bootstrap grid
2. Don't use bootstrap
3. Use a mix of bootstrap and fixed width columns (Yuck? )
I'm sure I'm not the only one who has ever faced this problem . Looking for real world solutions or documentation. Not theories.
thanks
When you have a psd file, the problem that you can encounter is the width of the blocks. The height don't causes problems, but the width ussually do because mabey the psd is not made to work with 12 colums like bootstrap does, but the solution for this case is the nested grid. You keep nesting the elements until you get the right width of your blocks. I didn't recived yet any psd that i could not build it with bootstrap.
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