johna's blog

How I use the new Bootstrap Icons web font

2022-01-07T12:00:00+10:00

I love Bootstrap Icons. It has a large selection of quality icons and it's open source so can be used for free (subject to license terms and conditions).

The simple way to use the icons on your website is to use the web font, but that means you are including all 1,500 plus icons (as of v1.7), albeit the file is a reasonable 120kb.

But using a free online tool, you can create your own web font with just the icons you need.

Here's how I use Bootstrap Icons...

Download the icons

Go to the Bootstrap Icons download page on Github and download the bootstrap-icons-x.zip ZIP file.

Choose which icons you want to include

Unzip and open the file. The icons are the SVG files in the root of the ZIP file.

You may find it easier to create a temporary new folder to store the icons you want in.

Make your own web font

I use the IcoMoon app to easily create a custom web font.

Head on over to icomoon.io/app.

Press Import Icons (near top left of page) and select all of the icon SVG files that you want in your font.

You can either add files one at a time or you can select multiple files at once.

Once you proceed, your selected icons will appear as "Untitled Set". You still need to highlight each of your icons to select them so that they get included in your custom web font. You can select one at a time or multiple select or select all.

Next step is to press Generate Font (bottom right of page). This will show details of your new font and expose a Download button so you can download a ZIP file containing what you need.

The ZIP file has style.css which you will need to include or better still, add to your HTML template or existing style sheet.

There is also a fonts folder which you will need to copy to your website as it contains the actual web font.

Lastly, there is demo.html which contains examples of how to include your chosen icons in your HTML.

The icon classes are named icon- and then the file name without extension. So you would typically use as follows:

Accessibility

If your icon is purely decorative, then hide it from screen readers:

<span class="icon-arrow-right-circle" aria-hidden="true"></span>

If your icon is semantic, then you will need to provide alternative text for screen readers. This example is based on what font awesome recommends:

<span aria-hidden="true" class="icon-bluetooth" title="Bluetooth"></span>
<span class="sr-only">Bluetooth</span>
<span>enabled</span>

What's new in Bootstrap v5

2020-12-22T12:00:00+10:00

There are many changes in Bootstrap v5, but these are some of the stand-out changes I noticed when updating a website to v5.

One of the first changes I noticed was to do with classes with "-left" and "-right" or "l" and "r". Because v5 now supports RTL (right-to-left) these have been changed to "-start" and "-end" or "s" and "e" for classes such as text-align, margin, padding, border, etc.

Another noticeable change is that data attributes now use a namespace. For dropdowns, collapses, modals, etc you now use "data-bs-*" instead of "data-*".

jQuery is no longer required so if you need it for other functionality you can include it yourself.

Forms

There are several important changes in class names for forms.

Select boxes now use the class "form-select" instead of "form-control".

For layout there is no longer a "form-group" class and all layout is now done with other generic Bootstrap classes such as margin and grid.

There is an attractive new form style called floating labels where the label and form control is styled as one single bordered element.

Modals

One nice feature of v5 modals is when you set the background option to "static" (so you can't click outside the modal to close it) if the users clicks outside of the modal it pulsates in size to remind the user that it is open and needs to be actioned before clicking away.

Helpers and Utilities

The screen-reader "sr-only" class is now named "visually-hidden" and there's a new option to make a hidden element visible when focused.

The old "embed" classes are now replaced by "ratio" classes.

There are new interaction classes for handling copying content and mouse pointers.

How to use the new Bootstrap Icons v1.2 web font

2020-12-12T12:00:00+10:00

With the release of Bootstrap Icons v1.2, there is now an easy-to-use web font.

Here's how you can use the new web font in your web pages.

At this stage I am not aware of a CDN (content delivery network) that hosts the Bootstrap Icons font files, so you will need to install the files on your own web server. The files are only about 229KB.

Update: As of v1.3 there is now a CDN.

Steps 1 to 3 can be replaced by the following if you wish to use the CDN instead of hosting the font files yourself.

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">

Step 1 - Download the Bootstrap Icons files

Go to icons.getbootstrap.com and download the latest release. There is a download button at the top-right corner of the page.

Step 2 - Install the Bootstrap Icons files

To use the web font on your web site you will need to extract a few files from the ZIP file.

From the fonts folder you will need bootstrap-icons.css and the fonts folder (the one inside the first fonts folder) with the bootstrap-icons.woff and bootstrap-icons.woff2 files.

Copy the CSS file and fonts folder to your website. You can copy the files to your web root folder but typically you would copy them to a folder that contains your other CSS files.

Step 3 - Include the Bootstrap Icons CSS file in your web pages

To be able to use the fonts in your web pages you will need to include the bootstrap-icons CSS file in your HEAD section of your HTML. How this is done will vary on the type of website. If you have simple HTML pages then you would need to add this to each page where you want to use the web font. If you are using a content management system like WordPress then this can be done in a template. If you are not sure use Google to search for how to add a CSS file to your CMS.

To include the CSS file you would add something like this:

<link href="bootstrap-icons.css" rel="stylesheet">

(CSS file is in same folder as the HTML document)

<link href="/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your web root folder)

<link href="/css/bootstrap-icons.css" rel="stylesheet">

(CSS file is in your CSS folder)

Step 4 - Using the Bootstrap Icons web font

To include one of the icons you simply add the web font code that you can find on the Bootstrap Icons website.

For example:

<i class="bi-alarm"></i>

Each icon has it's own class (eg. bi-alarm), and you can find these by clicking an icon on the Bootstrap Icons website.

Full example:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<link href="bootstrap-icons.css" rel="stylesheet">
	<title>Hello, world!</title>
</head>
<body>
	<div class="container">
		<h1>Bootstrap Icons v1.2 Example</h1>
		<p>
			<i class="bi-alarm"></i>
		</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap Icons in Alpha

2019-12-09T12:00:00+10:00

The Bootstrap team have introduced their own open-source icon set.

Back in the old v3.x days, Bootstrap was packaged with Glyphicons but no icon set came with v4.x so many people switched to one of the many open-source icon sets. I often used Open Iconic.

Bootstrap Icons is a separate project to Bootstrap and can be used with or without it.

The set comprises 213 icons. Some of the icons have an outlined and filled version.

The set has icons for most common needs, but there are a couple of surprise omissions. There are no icons for like or dislike, usually a thumbs up or down in other sets, and nothing I could find suitable for follow or unfollow.

You also won't find any of the social media brands represented in the set, although I know these are legally protected so are probably not appropriate in an icon set anyway. However, the set does contain Bootstrap icons -- not sure how useful these will be to most people.

The set is provided in SVG format and will scale proportionally with the selected font size.

The Bootstrap team have left the implementation up to you.

You can embed icons within your HTML, reference the individual SVGs like normal images, or use the SVG within your CSS.

If you are used to more simpler methods of including icons, you may be a little disappointed.

I wouldn't be surprised to see the icon set as an installation option when including Bootstrap v5.x when it rolls out in the near future.

Leave a comment and let me know what you think of the new icon set, whether you will use it, and what extra icons or changes you would like to see.

Visit site

Update: After only a few weeks the Bootstrap team released Bootstrap Icons Alpha 2.

They added 20 new icons including some eye icons which are suitable if you need icons for watch and unwatch.

Some issues were also fixed and some of the icons improved.

Update: 20 March 2020

Alpha 3 is now out with some major improvements to Icons and hundreds of new icons added.

Still no like and unlike icons though!

Update: 22 May 2020

Alpha 4 has been released. Like and unlike are here! There are also new e-commerce icons, calendar icons and arrows.

There are now around 700 icons including thumbs up/down.

Update: 29 June 2020

Alpha 5 is out now and will be the last Alpha release. There are now over 1,000 icons.

Next release will be v1 stable.

What's new in Bootstrap 4.4.0 and 4.4.1?

2019-11-27T12:00:00+10:00

There are two major improvements in Bootstrap 4.4.0, released 26 November 2019.

Responsive containers

If, like me, you've been annoyed with the fixed width of Bootstrap's container class below the xl breakpoint, then you will be pleased with the enw responsive containers.

If you use container-{breakpoint} instead of container, the container will span 100% width up to the specified breakpoint.

Bootstrap documentation
Demo

Responsive .row-cols classes

There are now shortcut row-cols-* classes to specify how many columns should be shown per row.

Looking at the following example, the row will contain two equal width columns at all breakpoints.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

You could specify a different number of columns per row at all breakpoints by changing to row-cols-* or specify columns for various breakpoints by using row-cols-{breakpoint}-*, for example:

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Bootstrap documentation (Grid)
Bootstrap documentation (Card)

These are the two changes that most people will want to know about, but there has also been other minor behind-the-scenes changes and bug fixes in 4.4.0. Check out the Bootstrap blog for full details.

Update: Just a couple of days later, the Bootstrap team released v4.4.1 as there was an issue when compiling with some Sass compilers.

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

2019-04-09T12:00:00+10:00

I've now written a couple of posts on the topic of using Bootstrap modals in ASP.NET Web Forms projects, one on using native Bootstrap modal methods with ClientScript and another attempting to control them with server-side code only. Both methods had some issues.

In this, my third post, I go over the methods I am using now and the problems I have encountered and overcome.

The previous server-side method was ideal, but I couldn't get around some issues, so I now believe the best method is to use the native JavaScript methods to hide and show the modals.

Here's some sample code for how I do this now:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" OnClick="Button1_Click" Text="Show Modal" />
	</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="Modal1" runat="server" CssClass="modal" data-backdrop="static" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Sample Modal</h5>
			</div>
			<div class="modal-body">
				Sample modal content.
			</div>
			<div class="modal-footer">
				<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
					<ContentTemplate>
						<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Continue" />
					</ContentTemplate>
				</asp:UpdatePanel>
			</div>
		</div>
	</div>
</asp:Panel>

protected void Button1_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Modal1_show", "$(function(){$('#" + Modal1.ClientID + "').modal('show');});", true);
}

protected void Button2_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);
}

It is important that any controls inside the modal that cause a postback are contained in an UpdatePanel inside the modal. Remember that UpdatePanel contents are recreated on partial postback, and if this happens the modal gets destroyed and can no longer be controlled so you must not update the UpdatePanel that wraps the modal itself. This will leave the page with no modal but still with the grey backdrop making the page unusable.

In my example, I have an UpdatePanel wrapped around Button2 which is used to close the modal.

What if you want some other part of the page to update based on an action inside the modal or when the modal is closed? You need to have an UpdatePanel wrapping the other content you want to update and in your server-side code you must manually force an update to both (or more) UpdatePanels.

Let's change the above code so that when the modal is clicked it updates a Label control in another UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<div>
			<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
		<div>
	</ContentTemplate>
</asp:UpdatePanel>

protected void Button2_Click(object sender, EventArgs e)
{
	Label1.Text += "Modal closed. ";

	ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);

	UpdatePanel2.Update();
	UpdatePanel3.Update();
}

Note that this applies to both Bootstrap v3.x and v4.x.

Sample Bootstrap 4 template for a search orientated two row navbar

2019-01-16T12:00:00+10:00

This sample lends itself to an ecommerce website.

Features:

*Search is always visible, even on small screens
*Product categories are visible on larger screens but need a click to view on small screens
*Shopping cart link is always visible
*Phone number is always visible
*On small screens just a small logo is visible, but on larger screens the website name is also visible

This template uses standard Bootstrap classes wheere possible, but requires a little extra CSS to achieve the end result.

Demo

Source code:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
	<title>Hello, world!</title>
	<style type="text/css">
		#header .row{margin-right:-5px;margin-left:-5px}
		#header .col,#header .col-auto{padding-right:5px;padding-left:5px}
		#header_top{height:46px}
		#header_logo_left{float:left}
		#header_logo_right{display:none}
		#header_cart{position:relative}
		#header_cart_qty{position:absolute;top:0;right:12px;font-size:11px;line-height:14px;background:#212529;border-radius:50%;color:#fff;height:14px;width:14px;text-align:center}

		#header_cart a{font-size:1.5rem;text-decoration:none}
		#header_cart a .badge{color:#fff}
		#header_bottom a{display:block;line-height:36px}
		#header_bottom a:hover{text-decoration:none}
		#header_nav{clear:both}
		#header .collapsing{position:initial;height:initial;overflow:initial;transition:initial}
		@media screen and (prefers-reduced-motion:reduce) {
		#header .collapsing{transition:initial}
		}
		@media (min-width: 576px) {
		#header .row{margin-right:-15px;margin-left:-15px}
		#header .col,#header .col-auto{padding-right:15px;padding-left:15px}
		#header_logo_right{float:left;display:block;margin-left:4px}
		}

		@media (min-width: 992px) {
		#header_menu_toggler{display:none!important}
		#header_nav a{display:inline-block;margin-right:20px}
		#header_nav{clear:none;display:block!important;float:left}
		}
	</style>
</head>
<body>

	<div id="header" class="bg-light border-bottom">
		<div class="container">
			<div id="header_top" class="row align-items-center">
				<div class="col-auto">
					<a href="#">
						<img id="header_logo_left" alt="" src="https://via.placeholder.com/36x36.png?text=logo" style="height:36px;width:36px;" />
						<img id="header_logo_right" alt="" src="https://via.placeholder.com/231x36.png?text=brand" style="height:36px;width:231px;" />
					</a>
				</div>
				<div id="header_search" class="col">
					<form action="/search" method="get" role="search">
						<label for="keywords" class="sr-only">search</label>
						<div class="input-group">
							<input id="keywords" name="keywords" type="text" class="form-control" placeholder="search">
							<span class="input-group-append">
								<button type="submit" class="btn btn-dark"><span class="oi oi-magnifying-glass" aria-hidden="true"></span></button>
							</span>
						</div>
					</form>
				</div>
				<div id="header_cart" class="col-auto">
					<a href="#" class="text-danger"><span class="oi oi-cart" aria-hidden="true"></span> <span id="header_cart_qty">99</span></a>
				</div>
			</div>
			<nav id="header_bottom" class="clearfix">
				<a id="header_menu_toggler" class="float-left text-dark" data-toggle="collapse" href="#header_nav">menu <span class="oi oi-chevron-bottom" aria-hidden="true"></span></a>
				<a href="tel:0000000000" class="float-right text-dark"><span class="icon-phone"></span> (000) 000-0000</a>
				<div id="header_nav" class="collapse">
					<a href="#" class="text-dark">Menu option A</a>
					<a href="#" class="text-dark">Menu option B</a>
					<a href="#" class="text-dark">Menu option C</a>
					<a href="#" class="text-dark">Menu option D</a>
					<a href="#" class="text-dark">Menu option E</a>
				</div>
			</nav>
		</div>
	</div>
	<div class="container">
		<h1>Hello, world!</h1>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Free Bootstrap 4 Template with Side Navigation

2018-12-20T12:00:00+10:00

I recently needed a simple Bootstrap 4 template with side-navigation.

I came up with the following template. The design was inspired by several templates I saw online but I created my own HTML, CSS and JavaScript so as to use as much Bootstrap functionality as possible and keep the template simple and lightweight.

You are free to use the template however you like. No license applies and attribution is not required.

Demo

The two column layout uses a positive padding/negative margin trick above Bootstrap's MD breakpoint to achieve equal height columns.

At XS widths the menu is hidden and a small JavaScript script (jQuery) is used to hide and show the menu, which is positioned absolutely to take up at minimum the full height and width.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<title>Hello, world!</title>
	<style type="text/css">
		body
		{
			background:#f7f7f7
		}

		#header
		{
			background:#fff
		}

		@media (max-width:767px) {
			#nav-outer
			{
				display:none
			}
	
			#nav-outer.nav-show
			{
				background:#fff;
				display:block;
				position:absolute;
				top:0;
				left:0;
				min-height:100%;
				width:100%;
				padding-top:1rem
			}
	
			#nav
			{
				width:250px;
				margin-left:auto;
				margin-right:auto
			}
	
			#article-outer.article-hide
			{
				display:none
			}
	
			#header
			{
				border-bottom:1px solid rgba(0,0,0,.125)
			}
	
			.no-gutters-xs
			{
				margin-left:0;
				margin-right:0
			}
	
			.no-gutters-xs > .col,.no-gutters-xs > [class*=col-]
			{
				padding-left:0;
				padding-right:0
			}
	
			#article > .card,#article .row.no-gutters-xs > [class*=col-] .card
			{
				border-left:0;
				border-right:0;
				border-radius:0
			}
		}

		@media (min-width:768px) {
			#header
			{
				width:250px;
				float:left;
				padding-bottom:99999px!important;
				margin-bottom:-99999px
			}
	
			#article
			{
				max-width:1180px;
				margin:0 auto
			}
	
			#header
			{
				padding:0 30px;
				border-right:1px solid rgba(0,0,0,.125)
			}
	
			#body
			{
				overflow:hidden
			}
	
			#article-outer
			{
				margin-left:250px
			}
	
			#footer
			{
				max-width:1180px;
				margin:0 auto
			}
		}

		h1
		{
			text-align:center
		}

		.lead
		{
			text-align:center
		}

		#footer-outer
		{
			background:#efefef
		}
	</style>
</head>
<body>
	<div id="body">
		<div id="header">
			<div class="pl-4 pl-md-0 pt-3 mb-3">
				<div class="xrow clearfix">
					<div class="xcol float-left">
						<a href="#"><img src="https://via.placeholder.com/156x40.png?text=Logo" /></a>
					</div>
					<div class="xcol xtext-right d-md-none float-right">
						<a id="nav-show" class="btn btn-link btn-lg text-dark" data-xxtoggle="collapse">☰</a>
					</div>
				</div>
			</div>
			<div id="nav-outer">
				<div class="d-md-none text-right">
					<a id="nav-hide" href="#" class="btn btn-link btn-lg text-dark">Χ</a>
				</div>
				<div id="nav" class="pb-4">
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Home</a></div>
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Menu 1</a></div>
					<div id="nav-sub" class="pl-3">
						<div><a href="#" class="btn btn-link btn-sm text-dark">Submenu 1</a></div>
						<div><a href="#" class="btn btn-link btn-sm">Submenu 2</a></div>
						<div><a href="#" class="btn btn-link btn-sm text-dark">Submenu 3</a></div>
						<div><a href="#" class="btn btn-link btn-sm text-dark">Submenu 4</a></div>
						<div><a href="#" class="btn btn-link btn-sm text-dark">Submenu 5</a></div>
					</div>
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Menu 2</a></div>
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Menu 3</a></div>
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Menu 4</a></div>
					<div><a href="#" class="font-weight-bold btn btn-link text-dark">Menu 5</a></div>
				</div>
			</div>
		</div>
		<div id="article-outer">
			<div id="article" class="px-md-4 pt-3">

				<h1>Mauris eget quam orci</h1>
				<p class="lead">Quisque porta varius dui, quis posuere nibh mollis quis. Mauris commodo rhoncus porttitor.</p>
				<div class="card mb-4">
					<div class="card-body">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida tellus sit amet nibh porttitor, vitae dignissim massa interdum. Vestibulum erat sapien, laoreet et dui tincidunt, faucibus sagittis mi. Nam a pharetra purus, id sagittis nulla. Aliquam cursus, risus ac laoreet lacinia, dui dui egestas nulla, at iaculis tellus erat sed nunc. Nam venenatis elit ac ex accumsan gravida. Curabitur rhoncus, urna vitae efficitur feugiat, massa eros lacinia elit, scelerisque mattis velit purus sed magna. Fusce venenatis magna sed tincidunt fermentum. Etiam at diam tortor. Praesent vel placerat nunc. Pellentesque a enim volutpat, bibendum velit quis, dictum lectus. Aliquam erat volutpat. Fusce massa velit, euismod non suscipit quis, scelerisque id metus. Praesent ex diam, tempus ac aliquam sed, iaculis eu dui. Cras eget magna volutpat, placerat dui et, placerat quam. Vivamus posuere fringilla placerat. Aenean euismod fringilla tempus.</p>
						<p>Aliquam commodo non dui et elementum. Duis eget velit sollicitudin tellus consectetur rutrum non quis urna. Donec eros erat, fringilla ut bibendum nec, sodales eu mauris. Vivamus ex dolor, sodales quis vehicula non, pellentesque in erat. Nunc bibendum quam ac augue pretium ullamcorper. Nullam venenatis augue turpis, id laoreet orci sagittis eget. Quisque orci ipsum, consectetur quis suscipit et, cursus egestas risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies nisi vitae sagittis elementum. Suspendisse potenti. Proin vestibulum facilisis euismod. Phasellus pharetra condimentum ante, non sagittis ante semper a. Morbi condimentum semper congue.</p>
						<p>Fusce dapibus feugiat lacinia. Integer congue viverra nisl faucibus ornare. Proin pulvinar tortor magna, vel auctor urna placerat in. Sed volutpat fermentum urna eu cursus. Praesent pretium porttitor orci, sed lobortis lacus aliquam sed. Nam semper odio quis orci congue accumsan. Morbi ac porta est. Nulla bibendum urna quis elit dignissim varius. Suspendisse faucibus eleifend massa ac semper.</p>
						<p>Nulla auctor sed libero sed condimentum. Aliquam molestie dapibus lacus scelerisque egestas. Mauris egestas sed libero eget rutrum. Nam id tempor nibh. Aliquam nibh eros, tempor id dignissim sed, molestie ultrices elit. Pellentesque feugiat et justo id sagittis. Nullam ullamcorper nec est in blandit. Donec id vehicula nunc. Vestibulum molestie ex sit amet quam rutrum lobortis. Proin quis cursus quam. Sed nulla diam, ullamcorper vel sapien vel, pellentesque dignissim dolor. Donec efficitur eros at sapien posuere facilisis. Donec tempor leo arcu, vitae euismod felis gravida vel. Donec fermentum purus orci, vitae convallis quam condimentum quis. In hac habitasse platea dictumst.</p>
						<p class="mb-0">Aliquam non quam rutrum, hendrerit ligula id, vulputate felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis at purus nec neque ornare scelerisque dapibus id felis. Proin semper sapien eu quam rutrum, at vehicula arcu efficitur. Fusce posuere placerat elementum. Etiam pretium pellentesque est nec imperdiet. Integer accumsan ut lorem vel elementum. Cras molestie mi in risus finibus, et vehicula leo pulvinar. Nam sed erat quis nisl imperdiet porta eget sit amet quam. Maecenas id est nec odio pretium mattis. Cras elementum nibh at ultrices tempus. Cras lacus turpis, ultricies at turpis et, fringilla volutpat mauris.</p>
					</div>
				</div>

				<div class="card mb-4">
					<div class="card-body pb-1">
						<div style="overflow:hidden;width:100%;" class="mb-4">
							<div style="height:200px;width:1090px;">This is an example of handling Google Ads (which get a fixed height and width on load) when the browser window is resized. Your Google Ad code would go in place of this DIV.</div>
						</div>
					</div>
				</div>

				<div class="card mb-4">
					<div class="card-body">
						<p>Vestibulum finibus lacinia eros, sit amet tempus quam sollicitudin in. Morbi ut sollicitudin leo. Phasellus id sem tincidunt, ultrices orci a, accumsan dui. Ut dictum non quam tincidunt laoreet. Ut porta efficitur dui vitae luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus interdum, felis ut finibus feugiat, lorem ligula iaculis mauris, sollicitudin tristique nisl urna in orci. Phasellus mattis felis vel dictum venenatis. Curabitur volutpat pharetra augue, vitae condimentum urna sollicitudin ut. Ut bibendum pellentesque ullamcorper. Vestibulum tellus diam, dignissim vel ultricies vel, laoreet non lectus. Aenean dictum leo ut dolor varius suscipit. Nulla scelerisque efficitur turpis et eleifend.</p>
						<p>Sed semper dolor vitae nunc sagittis, sed tristique justo congue. Suspendisse porttitor non lorem id aliquam. Proin dolor enim, laoreet non varius efficitur, dictum sit amet orci. In hac habitasse platea dictumst. Donec tempor, augue et luctus mattis, purus nulla fringilla felis, vitae tincidunt nibh purus eget dolor. Cras dapibus vel lorem vel dignissim. Donec pulvinar tortor vel sem viverra, et dictum augue condimentum. Duis euismod nisi sit amet felis hendrerit mattis.</p>
						<p>In vel fermentum nisl, eget dignissim erat. Sed ante velit, tincidunt at mauris in, lobortis accumsan enim. Integer ac justo vel urna accumsan ornare eget id nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dignissim libero in congue efficitur. Vivamus commodo cursus dictum. Mauris lobortis erat vel luctus gravida. Donec auctor eget lacus non varius. Mauris volutpat porta sapien, et molestie leo hendrerit et. Ut id libero et quam facilisis molestie. Phasellus venenatis arcu nec sem posuere elementum. Aenean convallis est massa, quis aliquet massa posuere ac.</p>
						<p>Suspendisse potenti. Sed vehicula arcu turpis, nec consectetur mi vestibulum faucibus. Aliquam scelerisque tincidunt felis eget fermentum. Vestibulum fringilla egestas lectus, eget suscipit purus tempus ac. Sed varius tellus a egestas dignissim. Vestibulum laoreet congue nibh ut eleifend. Suspendisse massa tortor, laoreet vel posuere mattis, malesuada nec felis. Cras dapibus elementum lacus a convallis. Vivamus malesuada tempor congue. Mauris sodales arcu sed vehicula maximus.</p>
						<p class="mb-0">Nullam et ipsum non tellus auctor rhoncus in id augue. Proin nec orci velit. Ut ut leo eget quam dignissim sagittis. In non quam lectus. Integer auctor urna non scelerisque venenatis. Nam ultrices pretium nisi, sit amet porta urna euismod ut. Donec ornare velit non tincidunt placerat. Sed eu hendrerit risus.</p>
					</div>
				</div>

				<div class="card mb-4">
					<div class="card-body">
						<p>If you need to nest rows and columns within the #article area, but not inside a card, they will need special handling.</p>
						<p>Add the no-gutters-xs class to the row element when the columns collapse into rows below the MD breakpoint.</p>
						<p>If you have at least two columns below the MD breakpoint, then you will need to surround your .row with a .container-fluid and add padding.</p>
						<p class="mb-0">See the following two rows for examples.</p>
					</div>
				</div>

				<div class="row no-gutters-xs">
					<div class="col-md-4 mb-4">
						<div class="card h-100">
							<div class="card-body pb-1">
								<p>Sed semper dolor vitae nunc sagittis, sed tristique justo congue. Suspendisse porttitor non lorem id aliquam. Proin dolor enim, laoreet non varius efficitur, dictum sit amet orci. In hac habitasse platea dictumst. Donec tempor, augue et luctus mattis, purus nulla fringilla felis, vitae tincidunt nibh purus eget dolor. Cras dapibus vel lorem vel dignissim. Donec pulvinar tortor vel sem viverra, et dictum augue condimentum. Duis euismod nisi sit amet felis hendrerit mattis.</p>
							</div>
						</div>
					</div>
					<div class="col-md-4 mb-4">
						<div class="card h-100">
							<div class="card-body pb-1">
								<p>Suspendisse potenti. Sed vehicula arcu turpis, nec consectetur mi vestibulum faucibus. Aliquam scelerisque tincidunt felis eget fermentum. Vestibulum fringilla egestas lectus, eget suscipit purus tempus ac. Sed varius tellus a egestas dignissim. Vestibulum laoreet congue nibh ut eleifend. Suspendisse massa tortor, laoreet vel posuere mattis, malesuada nec felis. Cras dapibus elementum lacus a convallis. Vivamus malesuada tempor congue. Mauris sodales arcu sed vehicula maximus.</p>
							</div>
						</div>
					</div>
					<div class="col-md-4 mb-4">
						<div class="card h-100">
							<div class="card-body pb-1">
								<p>Nullam et ipsum non tellus auctor rhoncus in id augue. Proin nec orci velit. Ut ut leo eget quam dignissim sagittis. In non quam lectus. Integer auctor urna non scelerisque venenatis. Nam ultrices pretium nisi, sit amet porta urna euismod ut. Donec ornare velit non tincidunt placerat. Sed eu hendrerit risus.</p>
							</div>
						</div>
					</div>
				</div>

				<div class="container-fluid px-md-0">
					<div class="row">
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col md-3 col-lg-2 mb-4">
							<div class="card h-100">
								<div class="card-body pb-1">
									<p><img src="https://via.placeholder.com/320x240.png?text=Gallery" class="img-fluid" /></p>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div id="footer-outer">
				<div id="footer" class="px-4 py-4 text-center">
					© Copyright 2018. All Rights Reserved.
				</div>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<script>
		$(function () {
			$("#nav-show").click(function () {
				$("#article-outer").addClass("article-hide");
				$("#nav-outer").addClass("nav-show");
			});
			$("#nav-hide").click(function () {
				$("#article-outer").removeClass("article-hide");
				$("#nav-outer").removeClass("nav-show");
			});
		})
	</script>
</body>
</html>

Bootstrap 4 white buttons and input groups with button addons

2018-06-29T12:00:00+10:00

Bootstrap 4.x doesn't give you white buttons by default, but sometimes white buttons look better, particularly for something like a search box using an input group with button addon placed on a navbar.

The outline classes for buttons almost accomplish this but there are some differences in border colours so they don't look quite right.

You can accomplish the perfect style with a new css class which I've called `btn-white` in my example:

.btn-white {
	background-color: #fff;
	border-color: #ced4da;
	color: #212529;
}

And sometimes input groups with button addons look even better if the border between the text box and the button is removed. There's a few CSS overrides that can achieve this look simply:

.input-group > .input-group-append > .btn-white {
	border-left: solid 1px #fff;
}

.input-group > .input-group-prepend > .btn-white {
	border-right: solid 1px #fff;
}

Here's the final product, with borders (top) and without (bottom).

As a side note, if you are looking for a way to show a magnifying glass without a custom font or image, you can use HTML entity `⌕`. Don't forget to provide a fallback for accessibility.

Improving Bootstrap 4 modals on small screens

2018-06-27T12:00:00+10:00

Bootstrap modals are great but on small screens they take up more valuable space than necessary.

With a few simple CSS tweaks you can maximise the available space and improve the look of modals on small screens.

The first thing to do is to remove the margin around the modal:

@media (max-width: 575px) {
	.modal-dialog{margin:0}
}

The media query with maximum width means this change applies just to the XS size.

With the margin gone, the border and rounded corners look weird so they need to be removed too:

@media (max-width: 575px) {
	.modal-dialog{margin:0}
	.modal-content{border:0;border-radius:0}
}

Now we have a much better looking modal that takes up the full width of the screen (middle screen capture on the attached image).

A further improvement that can be made is to make the modal take up the full height of the screen too:

@media (max-width: 575px) {
	.modal-dialog{margin:0;height:100%}
	.modal-content{border:0;border-radius:0;min-height:100%}
}

Here’s how these changes look compared to the standard Bootstrap style.

Responsive collapsing search filters in Bootstrap 4

2018-03-26T12:00:00+10:00

In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.

For example, a search results page with a bunch of search filters. On a desktop you might want those filters always visible, but on a small screen there might not be enough room and you don't want the search filters at the end of the page because the user would have to scroll all the way to the bottom to find them (they might not know they exist), and you don't want them taking up valuable room at the top of the page.

In these cases you want the user to see that filters are available at the top of the small screen page, and give them the option to show these filters with a button.

You can do this quite simply in Bootstrap 4 with a few classes.

In my example, I'll create a simple two column layout: one for search results and one for search filters. On large screens I want the search filters to be on the right side, but on small screens I want them to appear above the search results and be hidden.

So I'll put the search filters column first but use the "order-" classes to re-order them for larger screens (above md).

<div class="row">
	<div class="col-md-3 order-md-last">
		<!--Search filters-->
	</div>
	<div class="col-md-9 order-md-first">
		<!--Search results-->
	</div>
</div>

Next I'll add a button that uses the "collapse" feature and make this visible on small screens but hide on large screens.

<button type="button" data-toggle="collapse" data-target="#filters" class="d-block d-md-none btn btn-primary btn-block mb-3">Filters &dtrif;</button>

And I'll create a DIV that will house my search filters and make this be shows and hidden by the button collapse, but always shown on large screens.

<div id="filters" class="collapse d-md-block">
	<!--Search filters-->
</div>

See the demo for full example code and see it working.

Demo

Bootstrap 4 fixed navbar that hides until page scrolled up

2018-03-08T12:00:00+10:00

Fixed navbars – that stay at the top of the screen at all times – are common and useful, but sometimes annoying as they can block the top part of the page (sometimes obscuring page anchors).

I like the functionality that I have seen on some websites where the navbar will scroll away as you move down the page, but re-appears as soon as you start scrolling up the page.

To add this functionality to Bootstrap 4 I made the following changes to the Bootstrap 4 navbar.

CSS:

.navbar-outer {
	position: relative;
	height: 56px;
}
.absolute-top {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030
}

jQuery (note two references to the navbar by id, in this example “navbar1”):

$(function () {
	var lastPos = $(this).scrollTop();

	setInterval(function () {
		var thisPos = $(this).scrollTop();
		if ($(this).scrollTop() > 1 && thisPos < (lastPos - 2)) {
			$("#navbar1").removeClass("absolute-top").addClass("fixed-top");
		} else {
			if ($(this).scrollTop() <= 1 || thisPos > (lastPos + 2)) {
				$("#navbar1").removeClass("fixed-top").addClass("absolute-top");
			}
		}
		lastPos = thisPos;
	}, 100);
});

For the HTML markup, several changes are required.

1) Add a div around the Bootstrap 4 navbar:

<div class="navbar-outer">
	…navbar code here…
</div>

2) Give the navbar an id, the same as used in the jQuery code (“navbar1” in the sample).

3) Add the class “absolute-top” to the navbar, eg:

<div class="navbar-outer">
	<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light absolute-top">
		…navbar code here…

Please see the sample below for a demonstration of this.

Demo

Bootstrap 4 and 5 Customiser

2017-10-31T12:00:00+10:00

I love Bootstrap v4 and now that it is finally in Beta can start to use it in new projects.

But I miss the online customizer that was available for Bootstrap v3.

Perhaps one day the Bootstrap team will make a v4 customizer available on the Bootstrap website but I thought it might be handy to create on myself.

Presenting Bootstrap Customizer.

I wrote a simple website in PHP and used a Sass library called scssphp.

Bootstrap Customizer is simply a web form with fields for all Bootstrap Sass variables, and upon submission it compiles these variables and the Bootstrap SCSS files into a single Bootstrap CSS file.

Bootstrap Customizer is currently Alpha, and I plan to add some more features as time allows:

Option to exclude Bootstrap v4 components and features
Save customizations to a database so that they can be modified and recompiled
CSS minification

UPDATE: Bootstrap v5 is out now and I have updated Bootstrap Customizer for each Bootstrap release from v4 Beta to the latest v5 release.

Customizations are stored to a database and inside each downloaded CSS file there is a link to return to the customizer and make further changes.

If a file was generated for an earlier Bootstrap release, you will be given the option to migrate your customizations to the latest release.

The website also has a small number of articles on Bootstrap.

ASP.NET Web Forms and Bootstrap 3 and 4 Modals

2017-07-06T12:00:00+10:00

Update: this technique including CSS works without any changes for Bootstrap 4.0 too!

There are a few methods for hiding and showing Bootstrap 3.x modals in an ASP.NET Web Forms application, including a client script method I mentioned in a previous post.

This technique is pure ASP.NET (requires no client script) and allows you to show and hide modals by changing the Visible property of a containing PlaceHolder or Panel.

The advantage over this method over using client script and the native Bootstrap methods is that the modal will not be affected by full or partial postbacks and will be fully controlled by server-side ASP.NET.

A few new CSS classes are needed for this method:

.modal-static-backdrop {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:2000;
}

.modal-static {
	bottom: auto;
	display:block !important;
	position:absolute;
	z-index:2001;
}

The Bootstrap modal itself needs a few tweaks:

<asp:PlaceHolder ID="ModalPlaceHolder" runat="server" Visible="false">
	<div class="modal-static-backdrop"></div>
	<div class="modal modal-static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<asp:LinkButton ID="btnModalCloseHeader" runat="server" CssClass="close" OnClick="btnModalClose_Click"><span aria-hidden="true">×</span></asp:LinkButton>
					<h4 class="modal-title">Sample Modal</h4>
				</div>
				<div class="modal-body">
					<p>My modal content</p>
				</div>
				<div class="modal-footer">
					<asp:LinkButton ID="btnModalCloseFooter" runat="server" CssClass="btn btn-primary" OnClick="btnModalClose_Click" Text="Close"></asp:LinkButton>
				</div>
			</div>
		</div>
	</div>
</asp:PlaceHolder>

Then to control showing and hiding of the modal you can just set the Visible property of the placeholder, eg:

ModalPlaceHolder.Visible = true; //or false to hide it

In my example above, the modal is closed using either of the buttons in the header and footer which reference a btnModalClose_Click event which simply sets the PlaceHolder's Visible property to false.

Note that you should not use any of Bootstrap's own decoration of elements, eg. data-dismiss="modal" otherwise you could lose server-side control of the modal.

Also note that the modal should be positioned outside of any element that has a CSS 'position' set, otherwise the modal will appear relative to that element. It is best to move your modals out to just within the BODY CSS element.

Put the PlaceHolder (or whatever containing control you use) inside an UpdatePanel and the modal will show and hide without a full postback.

Update: Be aware that the modal will always display at the top of the page, but the user may be scrolled further down the page. You should take steps to scroll to the top of the page when showing a modal.

If the modal is inside an UpdatePanel then you can use something like the following code when showing your modal.

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "UpdatePanel1StartupScript", "setTimeout('window.scrollTo(0,0)', 0);", true);

Bootstrap 4 card with outline headers and footers

2016-12-22T12:00:00+10:00

If you use Bootstrap 4 cards and apply one of the outline classes to add some colour you will find the header and footer are still grey, which doesn't look right.

This is how they look:

Personally I think the header and footer should receive the same colour as the outline class.

The Bootstrap team have already said no to this when it was suggested on GitHub.

Fortunately it is simple to apply some other Bootstrap classes to achieve the desired result. Add the corresponding bg-* class and "text-white".

Example:

<div class="card card-outline-danger">
  <div class="card-header bg-danger text-white">
    Header
  </div>
  <div class="card-block">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="card-footer bg-danger text-white">
    Footer
  </div>
</div>

And this is how cards can look now:

Much better, right?