I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.
Related
Using the standard out of the box configuration for Zurb Foundation on a page that has a large number of labels and input boxes.
I am trying to figure out the best way to "compress" the page vertically yet maintain legibility.
Is there a proper or best way to do this while maintaining the responsiveness of Foundation?
The proper way to do this is using the framework in its "sass" variant, so you can edit the _settings.scss file where you can find vars for almost every aspect, you can then:
Reduce line height
Reduce font size
Reduce padding of buttons, labels and form elements
Reduce the margin between elements
Hope this helps
It depends. Do you want the change globally across the entire project? If so, then ideally you would update the project's Scss settings. If not, then just add an overriding style that is specific to your page.
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
I'm using the Bootstrap framework for a web application. The responsive design works very well for the primary part of our site which needs to work on smaller screens. However, there's an admin section where the responsiveness is both not that necessary (will be administered on desktops) and gets in the way (the forms/tables require tweaking to work at smaller sizes).
Is there an easy, scalable way to turn off bootstrap responsiveness for certain pages?
Right now, we have a single bootstrap .css file with the #sizing elements included. I could separate out boostrap.css and bootstrap-responsive.css and then only call responsive on pages that need it. I presume that would work, but would mean yet another setting (it's a cakePHP app).
Ideally, I'd like to assign a class to the body or main container that would override the responsiveness -- <div class="container non-responsive">
One other note -- I'm really only concerned about the responsiveness below 1024px in this case. The way it expands in larger screen sizes works well in the admin section.
Separating them will be easier even though it's another setting. When you download Bootstrap from their home page (http://twitter.github.io/bootstrap/, instead of via their Customize page or via the GitHub project) it already separates the responsive styles into a separate file.
However, you can add your own styles that are more specific than each of the responsive styles in Bootstrap and override them. It could get hairy though because you'd basically have to repeat everything in bootstrap-responsive.css and override manually for each style property specified by Bootstrap's responsive file.
A better approach might be to edit bootstrap-responsive.css and prefix each style within the media query with ".responsive " and add the "responsive" class to the body element of the pages that you DO want to be responsive.
Hope this helps.
It's noticeable when using the "Hot Towel" SPA template with Durandal that the views sit in a middle window that's 1100 pixels in width rather than using all the available space.
And yet all the views within the applicationHost are set to use the Bootstrap from Twitter "fluid" styles. Effectively a hard-coded max-width set on the body tag is making all these fluid styles redundant and rather meaningless.
It's easy enough to over-ride the body style set in app.css (assumming there will be no side effects to setting it to a ridiculously high value) but I was just wondering if anybody knew the reason for setting it this way in the template, given that it's undoing all the good work of trying to implement a responsive design that all those Bootstrap "*-fluid"styles are trying to implement.
No particular reason. Feel free to remove it if the layout still appeals to you. You can submit a pull request on github for changes too, as HotTowel is open source.
I find Bootstrap insufficiently flexible. For example there's not a straightforward way to change font or line-height properties. I want a one-line method to change these properties.
What else can I use similar to Bootstrap (that I'm sure will not be as rich)? I just need some style collections that are flexible for those kinds of changes.
You can change all of the typography values (and pretty much everything else) on the Customize Page. The links are in the toolbar at the top of most pages of the Bootstrap site.