I am trying to use bootstrap 5's off canvas.
The css & js associated with the plugin do not seem to be included in the framework.
https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/
The demo on the BS website works; However, the github link on the BS website goes to a 404.
https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md
Bootstap 5 beta 3 (Update 2021)
Bootstrap has finally introduced an official Offcanvas component! From the offical blog...
"..the offcanvas comes with configurable backdrop, body scroll, and
placement. Offcanvas components can be placed on the left, right, and
bottom of the viewport..."
Bootstrap Offcanvas demo
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Sidebar
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> Dropdown button </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Read more
Bootstap 5 beta 2 (Original answer)
As you can see in the official Bootstrap docs, there is not (yet) a Off-canvas component in Bootstrap 5 beta. The netlify docs you referenced are based on an older pre-alpha build.
The Bootstrap 5 examples do show an experimental off-canvas layout, but like the other examples it requires extra custom CSS and JS that can be found here in the Bootstrap GH repo
Once you include the extra CSS/JS, the off-canvas example works as expected.
Related
I have a button Sign Up that loads in content from another file in the form of a Modal. When I click the button for the first time, the script works normally with no errors/warnings. However after the first time, if I dismiss the modal by clicking off of the element, clicking the Sign Up button again STILL WORKS, however it now throws a console error, stating $(...).modal(...).find(...).load(...) is not a function. In another one of my posts trying to solve this issue, I discovered the .load() method wouldn't work because I had the wrong version of jquery sourced in the file. But since then I have fixed that issue and the Modal now works, so I don't understand where this error is coming from.
Secondly, when the modal appears, it darkens the rest of the page (normal behaviour of the modal), if I try to dismiss the modal using the close button in the header, the modal disappears however the rest of my page is left darkened?/left out of focus? and the page becomes un-interactable...
Thirdly, I posted this as a seperate question due to the difference in nature: Bootstrap Modal messes up Carousel CSS
How do I fix these issues?
HTML file
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Land Power</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
<!-- <li class="nav-item ">
<a class="nav-link" href="contact.html">Contact Us<span class="sr-only"></span></a>
</li> -->
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html" data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Modal content load script
<script>
$('.signup').on('click', function(e){
e.preventDefault();
$('.modal').modal('show').find('.modal-body').load($(this).attr('linkFile'));
});
</script>
I think the issue here is likely that you are including bootstrap from two sources. Check your code to make sure you are including bootstrap from only one source. I had a similar issue not too long ago, solved when I realized bootstrap was being automatically included from another CDN.
Here is a jsfiddle containing your code inside a bootstrap template. It works as you have described it to.
https://jsfiddle.net/fatchild/b04r7Ljo/3/
It is a good idea to take your code out of context into a tool like JSfiddle in order to isolate the bug. As you can see there is nothing wrong with the code you have supplied.
I'm having a problem with the alignment of two "buttons" (links) on the right in bootstrap.
My goals are two:
To make them as right-aligned as possible.
To always have a small margin between them.
Although at first the separation between them is more or less correct and I can get them to be aligned to the right without an excessive margin of the last element on the right side, as I reduce the size of the page, both end up overlapping.
I've managed to prevent this from happening by putting mr-x, mr-sm-x,... classes on them, but I can see that it doesn't make any sense because in order for it to work more or less well, I have to put an excessive amount of classes on them. Something like:
ml-3 ml-sm-1 ml-md-1 mr-4 mr-sm-2 mr-md-2 mr-lg-1 mr-xl-0
And the result is not optimal either.
I have tried to make it work with offset classes, with align-items-end and with justify-content-end. Also with float-right, but I always have problems with margins and overlap.
Here are some images that show the problem and the example in jsfiddle
Example on jsfiddle
Seems like you want to use Bootstrap's button groups:
<div class="container">
<nav class="navbar heading-title">
<span class="navbar-brand mb-0 h1">Título</span>
</nav>
<nav class="navbar row justify-content-end">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a> <a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a>
</div>
</nav>
</div>
jsFiddle example
When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu"
What am I missing?
<!-- logo -->
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img src="assets/img/Grayscale_cloud.png">
</a>
<div class="navbar-burger is active" data-target="navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- menu -->
<div class="navbar-menu" id = "navbar-menu">
<div class="navbar-start">
<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>
<a class="navbar-item" routerLink="networksupport">Network</a>
<a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
</div>
</div>
</nav>
`,
I tried the code here to no avail. https://medium.com/#edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1
Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.
there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all
you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted
toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
to get this toggle function to work, you'd have to assign the names in app.component.html
you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
and <a class="navbar-item" href="#"> .... </a> ...which should have
<a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
Also, we had to do npm install bulma
add the css in our angular.json:
"styles": ["node_modules/bulma/css/bulma.min.css" ],
you can check a working sample here
I'm experiencing the following issue - when I add a glyphicon with a pull-right class to a li option it looks ok as long as the text within li isn't too long. If it is, the glyphicon gets pushed slightly below the text (to a next line I guess).
How can I make it stay in the same line?
<div class="btn-group btn-group-justified">
<div class="btn-group open">
<button type="button" data-toggle="dropdown" class="btn btn-default btn-danger dropdown-toggle">Input <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="1" class="cursor-hand">Very long text here<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
<li><a id="2" class="cursor-hand">Empty option</a>
</li>
<li><a id="41" class="cursor-hand">Short<span class="glyphicon glyphicon-ok text-danger pull-right"></span></a>
</li>
</ul>
</div>
One more thing that is very annoying is this happens all the time in FF 30.0 (running Win XP here) while Chrome and IE (tested in 8.0) at least try to keep the text and the icon in line.
Here's a fiddle that shows the problem http://jsfiddle.net/ukgAY/
You need to remove the pull-right and position the tickbox manually : I replaced the pull-right with pright class
ul li a {position: relative }
.pright {position: absolute; right: 0;}
See http://jsfiddle.net/3JgND/
I'm creating a theme with Wordpress and Bootstrap and have included their 'dropdown' for a filtering element on the page. It works fine in all browsers, including when I scale them down to mobile size. But, when I visit the site from an iPhone or iPad the dropdown doesn't drop down, so to speak.
This is the markup that I have:
<div class="col-md-4 col-sm-6">
<div class="bdo-employee-filter dropdown">
<div class="dropdown-toggle filter-button" type="button" data-toggle="dropdown">
<div class="text">Filtrera</div>
<div class="arrow"></div>
</div>
<ul class="dropdown-menu" role="menu">
<li>Rensa filtrering</li>
<li>IT</li>
<li>Office of World Reign</li>
</ul>
</div>
</div>
I have tried following Bootstrap's example and can't really see what could be wrong. Nothing happens at all when I try to open the dropdown from an iphone or ipad. On the same page I use their navbar dropdown, and that works fine on all devices.