Modal width (increase)

Bootstrap 3 You can create or just override default bootstrap modal-lgby doing below: .modal-lg { max-width: 80%; } If not working just add !important so it would look like below .modal-lg { max-width: 80% !important; } Now call the modal-lg. <div class=”modal-dialog modal-lg” role=”document”> <!– some modal content —> </div For Bootstrap 4 refer to … Read more

Collapsing Sidebar with Bootstrap

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 … Read more

What happened to the .pull-left and .pull-right classes in Bootstrap 4?

Bootstrap 4 The classes are float-right float-sm-right etc. The media queries are mobile-first, so using float-sm-right would affect small screen sizes and anything wider, so there’s no reason to add a class for each width. Just use the smallest screen you want to affect or float-right for all screen widths. Official Docs: Classes: https://getbootstrap.com/docs/4.6/utilities/float/ Updating: … Read more

Align nav-items to right side in bootstrap-4 [duplicate]

TL;DR: Create another <ul class=”navbar-nav ml-auto”> for the navbar items you want on the right. ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left. Tested against Bootstrap v4.5.2 <!DOCTYPE html> <html lang=”en”> <head> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; … Read more

Bootstrap 4 – Glyphicons migration?

Migrating from Glyphicons to Font Awesome is quite easy. Include a reference to Font Awesome (either locally, or use the CDN). <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”> Then run a search and replace where you search for glyphicon glyphicon- and replace it with fa fa-, and also change the enclosing element from <span to <i. Most of the … Read more