Bootstrap navbar is awesome for adding a navigation line and having it collapse to a button for a small screen. However, navbar is also useful when you don’t want it to collapse, but, instead, to change its orientation from horizontal to vertical and back when the screen size changes. Here is the code to acheive […]
Category: CSS
Ensuring important information below an image is visible.
In creating responsive web sites, we sometimes want to put a photo at the top of the page, but still ensure that the user sees important text below the photo at first glance. Otherwise, the user might not know that there is important information he should scroll to. We can use flex boxes and viewport […]
Making a Google map fit in a container
As a developer, adding a Google Map to a responsive page can be difficult because both the minimum width and minimum height have to be specified to make the map display. The best solution is to use “vw” units. 10vw will resolve to 10% of the current viewport width. For example : .themap {min-height: 120vw;min-width: […]
Bootstrap 4.3.1 supports automatically responsive font sizes
Responsive font sizes made easier Responsive web pages will reorganize themselves to account for smaller screens. However, unless the text size is also managed, you could end up with words that split in the wrong places and a disastrous page layout for smaller screens. Bootstrap 4.3.1 now automates the process of making the font size […]
Customizing Bootstrap 4
How to override variables in Bootstrap 4. If you are moving from Bootstrap 3 to Bootstrap 4, you may suddenly have trouble defining your theme colors. This is because Bootstrap 3 traditionally used LESS and Bootstrap 4 now defaults to SASS. Variables in SASS vs. LESS Like LESS, SASS is a superset of CSS, in […]