i want my bootstrap3 site to expand at a smaller width than its current 768px (or thereabouts). that’s just too large for me. i need it to expand at less than 500px
i’ve tried the customize bootstrap approach, but this isn’t optimum for me. you see i have 2 toggle buttons instead of 1 (one of which shows/hides a typical unordered list on small screens. the other of which shows/hides a search box & a submit button)
if at all possible i’d like these toggle buttons to appear at different screen sizes. one to appear when the screen is 480px, the other to stay hidden until the screen is down to about 420px. which is why i need to know what CSS rules to target to have this kind of fine-grained control
ideally it’d be good to know what the CSS rules do & why, particularly the ones for the navbar & its collapsible functionality (cos they’re a bit tricky). even a brief description of a couple of the key ones such as the how the .collapse classes work & the purpose of the “display: block !important;” type-rules would be massively useful, but obviously i’ll be more than grateful for just a solution (or even just a nod in the direction of a solution)
anyways, if anyone can help cheers in advance. if not, no worries. i can always stick with 2 toggle buttons & recompile a custom bootstrap file with a different value of @grid-float-breakpoint
Sorry to reply in such a curmudgeonly, off-topic way, but in these situations, I wonder why you’re using a framework? Wouldn’t it be better to create this just the way you want it? Hah, that’s my resistance to frameworks.
I guess if you’re going to use a framework, it’s worth reading the docs in depth, to get really familiar with how it works and why it’s built the way it is, so that you know what you can and can’t do with it. What we typically see here is people getting into a real mess by not understanding the tool—and struggling to do simple things they could have done easily without a framework in the way.
its a cursed project i’m working on (doing it for a favor for someone). the website itself is built by an amateur. its like a house built by someone who taught himself bricklaying, plumbing, electrics, etc. everything is non-standard. CSS is a nightmare (rules everywhere)
& now Bootstrap 3 has been added. which is supposed to make things better right??? doesn’t seem to be doing in this case. the navbar is not an easy component to work with (not surprised its getting overhauled in v4). so, of course this website has to include it
as for reading the docs, i’ve found them not much use. they just don’t go into the kind of detail you need for understanding the workings of the navbar (my experience). i actually spent a couple of days pouring through the source code instead, which was kind of illuminating, but ultimately not much more useful cos there are just so many classes getting applied. & - like most documentation - they always fail to provide a simple, laymans explanation of what the f**k the CSS rules are doing at a high level
an overview of the navbar is what i need (i think). just a simple overview of how the rules work together. but somehow i don’t think i’ll get it
The break points are where you need to start since they are controlling when the screen changes sizes, and also when classes like visible-* and hidden-* are defined.
Rather than trying to pick apart the mess it sounds you’re left with, maybe you can try to customize bootstrap to your liking and then replace the default bootstrap files:
its ok, i’m just being less ambitious (both toggle buttons appear at the single breakpoint). so i’ve done already what you advise - customized bootstrap so the breakpoint appears where i want it
not overly impressed with bootstrap through. is a pain when u’ve gotta sink a bunch of time on learning a framework only to have to sink (much) more time later trying to bend it into the shape u want. kinda getting drupal deja vu