Web Design Blog
A web design resource for developers and designers. It’s your one-stop shop for free code examples and responsive design ideas.
How to Create a Contemporary Shopping Cart Layout Using Bootstrap Cards
Shopping carts demand intuitive and simple designs that users can quickly comprehend. Using Bootstrap cards, you can implement a layout that meets these demands.
How to Create Simple Navigation Dropdowns with Bootstrap
Your primary or main navigation is one of the first things you tackle when developing a website. A popular way to lay it out is through a dropdown menu. Dropdowns can be tricky; fortunately, bootstrap helps with some default classes you can tap into.
How to Create Boxes with a Distinct Hover Effect
When utilizing cards or boxes, it’s helpful to create a hover effect that gives the allusion of depth so as to better indicate to the user that they are on a clickable item.
How to Create a Flyout Bootstrap Modal
By default, bootstrap modals will appear in the center of the screen with a slight animation from top-down. However, depending on your UI or overall design, you may want to have modals flyout from the sides.
How to Layer Profile Images Over One Another
If you need to show a list of users, members, or anything similar, try displaying profile images over one another to both conserve space. This also creates a feeling of connection among those users.
How to Create Sortable Lists with SortableJS
SortableJS allows your users to reorder items in an unordered list, giving users a visual dimension to specific actions and modifications.
How to Create a Form that Posts to Google Maps
If your webpage relies on the user getting directions to a specific location, you may want to post that inquiry to Google Maps so that the user can get immediate (and largely) accurate descriptions.
How to Add Font Awesome Icons to Your Input Fields
Adding icons to your input fields (such as login or registration forms) gives the form a touch of personality and helps break up otherwise plain input fields.
How to Create Bordered Services Boxes with Bootstrap
To emphasize the division between default bootstrap columns, you may want to add borders to separate content with clean design. This also gives you the freedom to use hover properties.
How to Use Text Animations with Slick Slider
Catch the attention of your audience and create smooth transitions between slides on your slider by adding these text animations.
How to Set Up Your Sass Package in Bootstrap
Sass/SCSS can be very powerful once you are familiar with the framework. Getting started, however, can be difficult. These are some basic tips to help get your first Sass package set up.
How to Create News Boxes that Show Additional Information on Hover
It’s not always possible to show a full news article title in a visual display. With hover effects, however, you can achieve consistent designs while still display important information.
How to Change Icon Colors and Background Colors on Hover
Creating good user experiences means clearly defining items that are links or otherwise clickable. If you use icons, one way to do that is to change the background color and the icon color on hover.
How to Improve Readability Using Text Overlay
Ensuring readability is challenging when displaying text over a background image. With a dark overlay behind the text, you can add contrast and increase readability.
How to Integrate Tabs into Your Content with a Page Navigation Toolbar
You may find that you have too much page content to ideally fit a single page. Rather than creating a series of child pages, however, you can include a Page Navigation Toolbar that allows you to tab between content on a single page.
How to Showcase Your Team and Organizational Leadership
Showcasing your team or leadership can help personalize a brand or organization. This tutorial walks you through how to build a team page that humanizes your brand and messaging.
How to Add Social Share Icons with Unique Hover Effects
Creating social share icons with unique hover effects helps encourage social media interaction.
How to Use Bootstrap to Create a Form with Inline Inputs
In order to conserve design space, you may need to have your form inputs inline rather than stacked. Bootstrap makes this incredibly easy to do.
How to Create a Department Listing or Directory Page (Part 2)
The most important information when showcasing a department or directory is a mission statement, leadership biography, and pertinent contact information. Here's how to design a website that makes those details look as important as they are to your organization.
How to Create a Department Listing or Directory Page (Part 1)
If you have multiple departments or directories in your organization, it’s important to create a single page that lists important info as well as links to separate pages.
How to Add Additional Links with Easy-to-Use Boxes Based on Bootstrap Columns
Often you need to add additional or relevant links to the bottom of your content. Do so with style using some simple boxes and default Bootstrap columns.
How to Create a Search Bar That Overlays Your Top Navigation
Adding search bars can be difficult, and they often lead you to make sacrifices to shove new input elements into your design. With a search bar that replaces your top navigation, however, you can direct user behavior while maintaining the consistency of your design.
