I'm trying to find an example of the bootstrap 4 responsive navbar that collapses to a hamburger button only at the xs width but is fully visible when wider.
There's a bootstrap 3 example that Just Works, but nothing for 4 that I've found.
The bootstrap 4 navbar examples page shows a collapsed content version but it's collapsed at all widths.
And below it hints at how to make it work using .navbar-toggler, et. al.
For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.
I have minimal bootstrap knowledge so any solution I don't want to fight the framework if there's already a sanctioned way to do this.
Edit:
Actually, the Responsive Navbar example below the Collapsible content in bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs class. I didn't see it earlier because I didn't make the window narrow enough.
Bootstrap 4 stable:
In the stable version navbar-toggleable-* has been renamed to navbar-expand-*, but the -xs infix is (still) removed, so in your case you should use navbar-expand.
Explanation in the docs: https://getbootstrap.com/docs/4.1/components/navbar/#how-it-works
Only for Bootstrap 4 alpha:
Actually, the Responsive Navbar example below the Collapsible content in Bootstrap 4 documentation does exactly what I was looking for using the navbar-toggleable-xs class. I didn't see it earlier because I didn't make the window narrow enough.
In Bootstrap 4 alpha 6, it’s now simply navbar-toggleable without the -xs.
EDIT: The documentation link is now here: http://v4-alpha.getbootstrap.com/components/navbar/#nav
Related
In Bootstrap I have a standard collapsible navigation.
When the mobile navigation is open I want to add an extra element to the top of the navigation, essentially as quick links to key areas.
I have added the below picture to illustrate my idea.
Essentially I have the Bootstrap navigation but is it feasible just to add a DIV or include a file at the correct viewport, in order to add the extra grid above the navigation.
UPDATE
So far I have the following using the advice given, I think now all that's required is to remove padding, as the navigation is in a col-xx-12.
You can use bootstrap responsive utility classes such as .hidden-xs .
This allows to hide and show the divs based on the screen dimension.
Refer here
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/
So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.
Here is the link:
jsfiddle: http://jsfiddle.net/6LsG7/
The sticky footer also covers alot of the content.
It seems that you are not using any classes provided by bootstrap. Instead you are creating your own id's? Bootstrap has a structured framework with the use of classes such as "container", "nav", "column".
For you to obtain a responsive design you must abide by the classes pre-provided. Might I suggest you check out a WYSIWYG bootstrap layout maker such as LayoutIt.
Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:
col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...
col-lg-6 will create a section 50% wide
and so forth.
So to create the right placement of your divs or sections. add a row class to every section that is stackable.
If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.
Now, to the obvious problems that I saw right away.
Between your body tags, create a wrapper class div that will contain your page and define it's width.
Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.
Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.
I just start to use this framework Bootstrap 3 and i am trying to change the order of a row.
On css flexbox you can change the order of flex object by adding the order : 1,2 and more to different elements.
Is it possible to do that on a row in bootstrap?
I have a logo image and i want that on a mobile site it will be at the top of the page,
And In a desktop site it will be after a few rows in the top.
There is nothing that I know of in Bootstrap that will allow for that type of change vertically. So your best option would probably to be to duplicate the logo in the places where you want it, then use Bootstrap's responsive utilities to control if they are visible based on screen size.
Working example: http://bootply.com/91992
No, at least not conveniently with CSS alone. You'd have to use jQuery (or just JavaScript). A better approach might be to create duplicate elements and show/hide with media queries.
Hey im trying to achieve this look:
Problem is I can never put 2 spans next to each other they always stack up and im trying to not have that happen as you can see in the picture. Any Twitter Bootstrap CSS genius have an idea?
And just to be a bit more specific this is only for mobile view meaning that I am using the bootstrap class "visible-phone" on my container class.
From Bootstrap 3 Documentation
http://getbootstrap.com/css/#grid
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. See the example below for a better idea of how it all works.