twitter-bootstrap-3

How to slide nav bar from left instead from top?

Easy. Change the default behavior from <button … data-toggle=”collapse” data-target=”#my-navbar-collapse”> to slide-collapse functionality which we are going to implement now <button … data-toggle=”slide-collapse” data-target=”#my-navbar-collapse”> Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) … Read more

How to adjust gutter in Bootstrap 3 grid system?

You could create a CSS class for this and apply it to your columns. Since the gutter (spacing between columns) is controlled by padding in Bootstrap 3, adjust the padding accordingly: .col { padding-right:7px; padding-left:7px; } Demo: http://bootply.com/93473 EDIT If you only want the spacing between columns you can select all cols except first and … Read more

How to work with ellipsis in bootstrap responsive table

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good – you should use the following styles together: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; span, div, th, td { overflow: hidden; white-space: nowrap; … Read more

How to Bootstrap navbar static to fixed on scroll?

If I’m not wrong, what you’re trying to achieve is called Sticky navbar. With a few lines of jQuery and the scroll event is pretty easy to achieve: $(document).ready(function() { var menu = $(‘.menu’); var content = $(‘.content’); var origOffsetY = menu.offset().top; function scroll() { if ($(window).scrollTop() >= origOffsetY) { menu.addClass(‘sticky’); content.addClass(‘menu-padding’); } else { … Read more

Disable Bootstrap 3 navbar going 2 rows in medium viewport size

For what it is worth, here is an idea that makes the navbar items morph from text to an icon based on the current responsive size. <li><a href=”#contact”><div class=”hidden-sm”>Contact<b class=”caret”></b></div><span class=”glyphicon glyphicon-plus visible-sm”></span></a></li> The result is the ‘Contact’ text converts into a plus icon at small size. Here’s a bootply example

Shrinking navigation bar when scrolling down (bootstrap3)

Sticky navbar: To make a sticky nav you need to add the class navbar-fixed-top to your nav Official documentation: https://getbootstrap.com/docs/5.0/components/navbar/#placement Official example: http://getbootstrap.com/examples/navbar-fixed-top/ A simple example code: <nav class=”navbar navbar-default navbar-fixed-top” role=”navigation”> <div class=”container”> … </div> </nav> with related jsfiddle: http://jsfiddle.net/ur7t8/ Resize the navbar: If you want the nav bar to resize while you scroll … Read more