Posts

Showing posts with the label Collapse

Collapse Not Working In Ng-bootstrap And Angular 4 App For Navbar Breadcrumb Button

Answer : I have a solution now. Just using ng-bootstrap solves your issue. Html file: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-l...

Collapsible Bootstrap, Show First Element

Answer : I don't think you've got all the HTML you need for the accordion to work unless you haven't pasted it all above. The Bootstrap docs first example has the first element set to be open: http://twitter.github.com/bootstrap/javascript.html#collapse (These docs are for v2.3.2, which is no longer officially supported.) I think it's the class "in" that sets it to be open initially. <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion...

Collapsing Sidebar With Bootstrap

Answer : Bootstrap 3 Yes, it's possible. This "off-canvas" example should help to get you started. https://codeply.com/p/esYgHWB2zJ Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens. /* collapsed sidebar styles */ @media screen and (max-width: 767px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -41.6%; } .row-offcanvas-left .sidebar-offcanvas { left: -41.6%; } .row-offcanvas-right.active { right: 41.6%; } .row-offcanvas-left.active { left: 41.6%; } .sidebar-offcanvas { position: absolute; top: 0; width: 41.6%; } #sidebar { padding-top:0; } } Also, there are several more Bootstrap sidebar examples here Bootstrap 4 Create a responsive navbar sidebar "dra...