Rules to Better UI (Bootstrap) - 5 Rules

Writing CSS is easy. Writing a lot of CSS can become unwieldy and unmanageable. Using CSS pre-processors like LESS or SCSS helps you segment and organize your CSS logically and compiles down to regular CSS so there are extra steps to get up and running.

The key advantage of using CSS pre-processors is nested selectors. Instead line after line of specific CSS selectors you can nest them and they will compile down for you. Check out this example:

The pre-processed CSS then compiles to the regular CSS shown above.

We recommend using SCSS for its slightly more robust language scripting, however, the differences between LESS and SCSS are minor.

Bootstrap provides a powerful, responsive layout with its rows and columns.

The common way to use Bootstrap's layout system is to create a basic grid which will appear as horizontal columns on the desktop but then stack on a smaller screen such as mobiles. This is done with a single set of .col-md-* classes.

Did you know you can have more control over the responsive layout by including multiple column classes? The ability to control the layout across multiple screen sizes is a powerful tool within Bootstrap. For example, if you don't want your columns to stack on smaller devices, use the smaller grid classes by adding additional column classes (e.g. .col-xs-* .col-sm-*) to the respective <div>s.

Creating a responsive website? It's important to make sure the browser renders your content correctly on any screen size. Define the proper viewport meta tag to inform web browsers they need to behave responsively.

<meta name="viewport" content="width=device-width" />

Your website's viewport should be the same width as any given device's screen. Specify this with the content attribute _device-width_.

Resize Text

The viewport meta tag should not set _user-scaling=no_ or a _maximum-scaling_ value less than 2. This allows us to meet accessibility standards for scalable content. See WCAG 1.4.4.

When designing responsive websites, it's important to consider what content is appropriate for each screen size. Desktops might have large navigation areas and extra content in a sidebar, whereas the phone might focus on other content.

By default, Bootstrap will wrap the columns and make them full width on phones. If you want to hide content rather than let it wrap you can use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

More information on Display property - Quickly and responsively toggle the display value of components and more with our display utilities.

Remove the title by adding the .hidden-xs class.

<h1 class="d-xl-none">ASP.NET</h1>

When building a web application, you may eventually need icons somewhere in the UI. In the past this was done with images (e.g. png, jpg) which can create a lot of resource management, inconsistency, and other pain. Instead, you should use an icon font that provides scalable and adaptable iconography.

Awesome icon libraries

• Bootstrap icons are quick and easy to use with or without using Bootstrap itself. Many consider this icon library timeless, but there is another popular icon library to challenge it...
• Font Awesome provides scalable vector icons that can be fully customized with CSS and many are completely free for commercial use. This library is especially great if you need a wide selection of generic icons in a hurry. You can also purchase a pro license to access an extended collection of variations like thin, sharp, and duotone icons.
• Google material icons and symbols are huge sets of variable icons. These icons can be customized right down to their line weight and roundness or sharpness.
• The Azure icon collection is an awesome set of icons if you are using Azure. Instead of browsing individually, you can also download the entire up-to-date set from the Azure Architecture Center.
• Check out Fluent iconography if you need Microsoft flavoured icons.
• There are many more awesome icon libraries, including open-source community projects like Lucide.

Why you should use icons, not images

• Scalability: Icon fonts are vector-based, which means they can be scaled up or down in size without losing quality. This is particularly important for responsive web design, where icons need to adapt to different screen sizes and resolutions. Image files, however, become pixelated and lose quality when scaled.
• Adaptability: The customization of icon color, size, and other properties is quick and easy using simple CSS. This removes any need to create new image files for icon variants or states.
• Consistency: Using a single icon library makes it effortless to maintain a consistent design language across your website or product.
• Cross-browser compatibility: Complete support across all modern browsers means icon fonts are reliable and render in a predictable, consistent way across different platforms and devices.
• Accessibility: Icons can be made accessible to screen readers by using ARIA roles and labels. Doing so ensures that users with disabilities can understand their meaning.
• SEO: Search engines can index text-based content more effectively than images. Using icons with proper semantic HTML can improve the SEO of your website, as search engines can understand and index that content.
• Faster loading: Icon fonts reduce the number of HTTP requests to the server. Fewer requests means faster load timing. In addition, even a small collection of image files can take a large amount of space. Icon font files are much smaller and make icon load times almost a non-issue.

If you absolutely must use images for icons (e.g. complex custom icons) use svg files. These vector-based images function closer to an icon font, being similar in scalability, adaptability, and customization.