How to Create a Bootstrap “Under Construction” Page (Complete Code Included)

Let people know you’re working on a great site by creating an attractive “Under Construction” page with Bootstrap. Using the Bootstrap CSS framework means your page will instantly look terrific and the layout will be mobile-responsive. You don’t want to be behind the trends when it comes to designing a delicious page.

What You’ll Need

In this article, we’re going to give you everything you’ll need to complete this whole process. We’ll give you the code for the page, and all you need to do is copy the HTML code, paste it, and upload the file to your server using your favorite file management method.

Getting the Code

Below, we’ve provided a complete code snippet you can copy into your file.

You will need a decent text editor. You should not be using something like Microsoft Word or any word processor to edit code. Get yourself a decent text editor or use the code editor in cPanel. If you don’t have a cPanel server already, you can choose from one of many hosting options with cPanel:

Now that we’ve decided on a way to edit the file, all you need to do is follow these steps:

  1. Open a new file titled whatever you want, ending in a .html extension (under_construction.html is fine)
  2. Copy this HTML code
  3. Paste the code into your file
  4. Upload the file to your server

Rename or Redirect?

You can do this the easy way or the hard way…

The Easy Way

When someone visits your domain, any file named index.html or index.htm will take precedent. If you don’t have any files on your site right now, you may as well go ahead and rename your “Under Construction” file to index.html. This way, it will display on your domain right away.

The Hard Way

However, if you have other files on your site you don’t want to tamper with, you can set up a redirect to the “Under Constuction” file by adding some code to your .htaccess file.

That’s All You Need to Do

Now, you have a fully functional, beautiful “Under Construction” page you can always use if you need to make modifications to your site.

Be sure to let us know if you have any problems or difficulties getting this done.

Leave a Reply