The art of simplicity

Bootstrap 5 is the first Bootstrap version that no longer has a dependency on jQuery. Of course some plugins and components still require vanilla JavaScript to function but none of them require jQuery. The Bootstrap framework , originally developed and open-sourced by Twitter, has been an indispensable tool for web developers. It provides a ready-to-use set of UI components and a grid system essential for adaptive web pages that need to display well across PC and mobile browsers. Since its inception, Bootstrap has always had a dependency on the jQuery framework. The jQuery framework , originally created in 2006, is one of the most popular JavaScript frameworks of all time. It provides powerful language features and cross-browser compatibility in an era when web technologies are going through many challenges and experimentations to support a variety of use cases ranging from interactive web pages, single-page apps, AJAX requests, and mobile web apps. With JavaScript standards and...

I'm working on upgrading an existing application from Bootstrap 4 to Bootstrap 5. I used the occasion to clean up the CSS logic. One thing I had in the original application was an image in the header that should be cropped on smaller screens. This how the header looks like on bigger screens: And this is on smaller screens: The trick I used originally was by using a media queries: However with the upgrade to Bootstrap 5 I would try to achieve the same thing using the built-in grid system and breakpoints. Breakpoints Breakpoints are the building blocks of responsive design in Bootstrap. You can use them to control when your layout can be adapted at a particular viewport or device size. Bootstrap includes six default breakpoints, sometimes referred to as grid tiers , for building responsively. These breakpoints can be customized if you’re using our source Sass files. Breakpoint Class infix Dimensions X-Small No...

Bootstrap includes a large set of icons based on the Glyphicon Halflings set . Using these icons is easy as you only need to specify some class information in your html: <button type="button" class="btn btn-default" aria-label="Left Align"> <span class=" glyphicon glyphicon-align-left " aria-hidden="true"></span> </button> However I had a situation recently where I didn’t want to specify the icon inside my html but inside my css instead. This is certainly possible by specifying a font-family and set the icon using the content property alongside a unicode hex entity: span.icon:before {    font-family: 'Glyphicons Halflings';    content: "\f015";  } To add this icon to a page, add this HTML tag anywhere in the body of your page: <span class=" icon "></span> But where does this hex entity comes from? Check out the gly...

A handy, interactive cheat sheet for Bootstrap 4: http://hackerthemes.com/bootstrap-cheatsheet   For every building block inside Bootstrap, it shows you a small code snippet and a preview of the result. A real time-safer!

Last week, a developer reported a strange issue: he was using the Bootstrap modal dialog. On this dialog he added a dropdown control(a  KendoUI control in this case). The problem was that each time he opened up the dropdownlist to  select an item, it immediatelly closed again. When we investigated the issue, we noticed that the moment the dropdown list opened, the Bootstrap modal dialog steals the focus and a blur event is triggered. This blur event makes the control close again. After further investigation we discovered what was causing this behavior. The dropdownlist creates a hidden popup element on the page. This popup element is not part of the modal dialog content. This means that when you click on the popup element, the modal dialog thinks that you want to move out of the dialog and therefore triggers a blur event. I noticed the same behavior not only with the KendoUI DropDownList control but also with other dropdown controls like  Select2 . We found 2 pos...

Today I lost some time searching why I couldn’t get the Bootstrap Progress bar working. The problem is that the sample on the Bootstrap site( http://getbootstrap.com/ ) isn’t up-to-date for the latest Bootstrap version(Bootstrap 3.3.1). Here is the sample code as of today: Instead the correct code should look like this: