I want to change boostrap 3 navbar to collapse in bigger resolution (now is ~740 px width) and i want to change it to 940 px , how to do it ?
If you download the Bootstrap source, you can modify the LESS variables (in variables.less) and compile the LESS into CSS yourself. The variable you're looking for specifically is #screen-sm, which is 768 by default.
A similar post on SO (Bootstrap 3.0 Media queries), mentions using Boostrap's customize option to make changes like this without having to download the source (http://getbootstrap.com/customize/#variables-basics, then scroll down to "Media queries breakpoints"), but I can't actually change the variables within that page, so I think you'll need to use the source and compile to CSS yourself.
Another question on SO worth reading discusses some best practices for changing those variables without getting your copy of the Bootstrap source too far out of sync that it would be difficult to upgrade. The question deals specifically with Bootstrap 2, but I think it's still worth reading.
Twitter Bootstrap Customization Best Practices
Edit: Bootstrap's documentation suggests modifying the #grid-float-breakpoint variable. That would be a more specific change to the responsive settings than modifying #screen-sm. Bootstrap docs
Related
I have an upcoming test in which I will be given a one-page design that I will be asked to re-create in one hour using HTML and CSS. The use of Bootstrap is also encouraged, and "bonus points" will be given for making the page responsive.
I am a little confused by the last part of this question, because I have read that Bootstrap is responsive in and of itself. If this is true, would I get "bonus points" for simply utilizing Bootstrap, or is there more to it than this (i.e. I still create my own responsive nav menu within my self-created CSS file / there is some way to edit or personalize Bootstrap's inherited responsiveness)?
Thank you!
Check out the introduction docs for Bootstrap:
https://getbootstrap.com/docs/4.2/getting-started/introduction/
It might be a bit much but when you spend a night experimenting and reading, you'll be able to do great things with it
Yeah the navbar is responsive on its own but if you want to be sure to get bonus points, you might want to change the behaviour of certain columns based on the screen size.
You can find more about that here
I am finishing up redesigning my website and incorporating Bootstrap into it. I realized that I have a mobile website from a 3rd party so I don't need the XS break point.
I have tried to just display: none and use the hidden-xs class for everything that that falls below the SM break point but I would rather just have my website be at the tablet size no matter how small you resize the window.
How would I go about eliminating that XS break point? Does anyone have any suggestions?
Please let me know! Thanks!
The fastest way to accomplish this is to either customize your own Bootstrap build or use LESS to make the change yourself.
To customize your own build (http://getbootstrap.com/customize/#media-queries-breakpoints), change the #screen-xs breakpoint value to "768px" so it matches the #screen-sm-min value.
Alternatively, override the #screen-xs variable in your LESS file by setting it to #screen-sm-min, like so:
#screen-xs: #screen-sm-min;
Note that #screen-xs is deprecated as of Bootstrap v3.0.1.
I have a really big web project based on Twitter Bootstrap.
I need to totally disable responsive features.
But Bootstrap page instruction for disabling responsive features (see this http://getbootstrap.com/getting-started/#disable-responsive ) includes a really hard step to do : For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
But I don't want to modify hundreds of .php and .html files and change all col-md-* styles to col-xs-*, what can I do?
As steps provided by bootstrap, its really hard to do change in hundred of files to achieve this. But CSS is the thing that could not get change easily by any function or script. You will need to put manual efforts.
One way is that instead changing class names in huge number of files, do edit css file of bootstrap and set common changes for classes of different resolution. Like if you have width 1200px to class ".col-xs-12" and it is working for you then reflect this change to other classes like ".col-sm-12" etc.
I am a newbie in UX/UI. I see that html5 also says responsive design and Bootstrap also telling the same. So which1 do i use for my layout. What is beneficial over the other. I want to get my basics right.
HTML5 and Bootstrap are totally different entities, only when you use them together in conjunction that you get a responsive site. Bootstrap is a CSS framework that allows you to build up a responsive site using predefined css classes and some javascript.
It depends on what you want.
If you want everything to write youself, then plain HTML5. On the other hand there a Bootstrap - CSS framework which does most of boring stuff and also uses HTML5.
Basically, you can use Bootstrap with HTML5. If you want to do everything by your own while keeping the site light-weight, then you can do plain HTML5-CSS. But Bootstrap handles almost all of UI responsiveness, at the expense of weight.
In the end, it's your call if you want to create a light-weight and self-written design(which is going to be harder) or add a little more weight, for a great number of functionalities you can just basically apply in ease.
Html5 isn't responsive but bootstrap is. Responsive isn't a HTML thing but a CSS thing. Usually you want users to be able to view your apps from different devices without any problems (such as cluttering) and for that porpouse we've got responsive and adaptative (both of which are CSS related).
Let's say you've got a div tag and you give it width and height propperties, such as 500x500. In large desktop's screens it could seem to be normal size, but on mobile phones it could take the entire screen or even more. So if you give it its size as a percentage such as width: 10%; and height: 10%; it would be a responsive-like solution.
Then it is bootstrap as a responsive framework with has its grid layout system that allows you to give different porcentages to the same HTML tag in different devices, using class="col-<device>-<columns>" (of course you could use more than 1 class for the same HTML tag). Bootstrap has 4 devices:
xs: mobiles
sm: tablets
md: desktops
lg: TVs
And it also has 12 colums for each row (it doesn't handle height manually, height increases as needed unless you manually define it in your css). So , our previous example could end being something like:
<div class="row">
<div class="col-xs-10 col-sm-8 col-md-9 col-lg-5"></div>
</div>
Here you've got a codepen example. (Try resizing its width)
And it would take different sizes for different devices. So at this point you could notice 2 things, there is something more (beyond of porcentages/responsiveness) going on here, and I still haven't mention what adaptative is. Ok, adaptative is just conditionally using some CSS rules for different screen sizes (not neccesarely as porcentages) by using media queries an example of adaptative layout would be Youtube and an example of responsive layout would be Twitter.
In addition bootstrap also provides you with some js functionality, some default css components (such as navigator, tables, and much more), and also a set of font-icons.
Functionally the answer is that Bootstrap is more complete, it has more buttons, menus, slide shows, etc. that you can quickly pick up and use. The downside is that the result will look like a Bootstrap site (just as you can usually tell a WordPress site).
HTML5 (I presume you mean HTML5 Boilerplate otherwise you are comparing apples to oranges), is more basic, and you will need to edit the HTML and CSS more. On the other hand, because it is more basic, you can have more flexibility with it.
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com