Bootstrap 4 Tutorial – How To Code a Sketch Template Into Responsive HTML/CSS

- - Tutorials

A couple weeks ago we published a tutorial on how to design a beautiful web template in sketch app, we’ll continue what we have done, and convert the sketch template that we have designed into a fully functioning responsive website with the help of the new Bootstrap 4.

The purpose of this tutorial is to introduce you to the release of the new bootstrap V4 Alpha, w’ill see some of the changes that have been made in the framework and some of the newly introduced components that we’ll use on the way.

Please note that it’s not recommended to use bootstrap 4 for production as it is still in alpha version, we’re using it in this tutorial for educational purposes only.

Preparing The Resources :

In this step you need to go back to the previous tutorial and download the source files, you’ll find there a list of the resources that we’ll need to build our website, such as the fonts and the pictures.

Exporting The Assets :

Slicing an elements in sketch is pretty easy, you just need to select the layer(s) or the group of the element(s) you want to export, then click Make Exportable in the bottom-left of the inspector(the right-hand side panel).

Sketch assets export

After that select the size, the suffix and the format then click Export Shape.

Sketch assets export

Folders Structure :

Our project structure consist of five folders, the first one is for the css folder for the styling files , the second folder is js for the Javascript files, the third folder is img for all the images, the fourth folder is the SVG files and the last one is the fonts folder.

Project Folders Structure

HTML Document Structure :

Start first by creating an HTML file inside your project folder and name it index.html, open it in the code editor of your choice, then add the HTML structure below,

We defined the doctype in HTML5, set charset to UTF-8 and added the viewport meta tag in order for our media queries to work on different viewports.

Stylesheet & Javascript files :

We need now to define our CSS and JS files, for that add the code below before the closing </head> tag.

We have added three CSS file, the first one is the bootstrap 4 framework, the second one is the styling for the Slick carousel library, and the third file is our main styling file, we’ll put all our custom CSS on it.

For the Javascript files we have included the libraries that we’ll use like jQuery, bootstrap, tether(make sure to place it before the bootstrap library or it will trough a JS error), slick carousel, the google map api, gmap.js to initialize the google map, and finally the main.js for our custom javascript code.

Fonts :

We need three primary web fonts for our template, Josefin(regular), Maven(regular, medium & bold) and Againts.

We need now to define these fonts so we can use them inside our CSS file later, for that add the code below in your main.css file, you can notice from the fonts path that we have placed all our fonts inside the fonts folder that we have created previously.

Creating the icons font :

We’ll use icons font and SVG’s in our template instead of using bitmap images, we’ll be using the SVG’s for the four services icons and the icons font for the other elements like the testimonial quotes and the social media icons in the footer.

So lets create our icons font, but first why icon fonts over bitmap images?
The bitmap images are not scalable, they slow down the load time due their big size and multiple http requests, in the other hand icon fonts are small, easy to manipulate, you can easily change their color, add shadows to them without the need of photoshop or any other photo editing softwares, and you can scale them without using their quality and sharpness.

Now that we know the benefits of using icon fonts, let’s move on and create one for our template.

Start by exporting the icons from the sketch template in an SVG format, then head on to the Icomoon app, and upload the SVG’s you just exported.

Custom icons font creation

Now select the icons you want to use, then click Generate Font in the bottom right corner of the window.

Custom icons font creation

Now the font is generated and ready to be used, download the font, create a new folder inside the fonts folder and name it icons then put the font files inside it.

Icons font folder

We need to define our icons font the same way as the previous step, for that go and add the code below in your main.css file.

General Styling :

In this step we’ll add some “general CSS” or “global CSS”, to get smooth fonts i applied the font-smoothing attribute on the body, which makes a big different on the font and make them smooth and sharp

At the end of this section, i customized the buttons .btn-primary with a rounded corners, i add a linear transition for a smooth hover transition.

Header :

Let’s move on and start setting up the markup and CSS for the header section.
From now on we’ll put all our HTML inside the body section, and all our CSS inside the main.css file.

HTML :

The header section is very basic, it consists of two parts wrapped by the <header> tag, the top part is simply a collapsible navigation menu, and the bottom part contains the logo and the hamburger button to toggle the top navigation bar.

In this section we used a new bootstrap 4 component which is the collapsible content to create the navigation menu, you can learn more details about it here.

CSS :

As you can see below, we absolutely positioned the header to the top of the page, so we can put the carousel underneath it, we also changed the default background color of the collapsible navigation(.bg-inverse) to white (#fff) and added a padding to it, for the bottom part(.navbar) of the header we just removed the padding by setting it to 0 and added a top margin, we also changed the font of the logo to josefinsans_regular with a size of 30px and white color, and finally styled the hamburger menu icon(.navbar-toggler).

The Hero/Carousel Section :

Next is the hero section or the master carousel, in this part we’ll use the slick library that we have included in the previous steps, we’ll also add cool animation to it using CSS3.

HTML :

The markup for the hero section is simply a section with the class hero wrapping a div carousel, inside it we put three elements each one consist of an h3 title.

Javascript :

We need now to initialize the slick library to make our carousel work, for that place the code below in your main.js file, which is located inside the js folder.

I have also changed some of the default slick carousel setting, to hide the slider arrows, i set the speed to 2s, activated the fade animation with the autoplay and added a custom pagination to replace the default slick pagination with a text caption, you can find all the setting here.

CSS :

Moving to the CSS, i added a static background image to the .hero section, and set it’s height to 100vh because i want it to take the full viewport height, i used the :after pseudo class to add a transparent gradient cover over the hero section similar to the one in the sketch template, i have also styled the #carousel and used the CSS3 transition and translate methods to animate the captions and the pagination.

Services :

The services section is composed of three columns and a “find more” button, each column consist of an icon, a separator and a title, all the elements are wrapped by a <section> with the class services, for the “Find More” button i used the bootstrap btn-primary class that we have customized previously using css.

In this section i used the new bootstrap 4 replacement class of text-center which is text-xs-center to center all the element inside the services columns.

The old bootstrap 3 utility classes “text-{left,center,right}” are no longer supported in the new version and have been replaced with a new responsive classes “text-{xs,sm,ms,lg,xl}-{left,right,center}”, you can find more details here.

CSS :

The services section is very simple as well, we don’t need too much styling for it, i center the icon container block .icon_containe horizontally, and i used a dashed border on the left of the separator with an auto margin from the left and the right to center it horizontally, i also applied some basic self explanatory styling to the h2 titles.

Projects :

The projects section is minimal and elegant, with sweet CSS3 animations, it consist of an h2 title, an h3 subtitle and three columns, each column is composed of the project image, the project title and small caption with a black overlay.

We used the new cards component, a card is an extensible content container that support a wide variety of content, including images, text, list groups, links …, cards are the new replacement of the old panels, wells, and thumbnails components, you can read more details about it and how you can use it here.

HTML :

CSS :

Now lets style our section, below i simply styled the titles and the subtitles, i added a box shadow to the cards to give them a depth effect, i used the :before pseudo class to add the overlay shadow behind the titles, and i used the translateY to animate the overlay shadow when the cursor is over the cards, after that i styled the small caption texts and added a hover animation effect to them.

Pro tip : Use the translate method to animates the position of the elements for smooth and sleek animations instead of using margins.

Testimonials :

The testimonials section contains two rows each one with two columns, each column consists of the image of the testimonial author, his name, his company/position, and the testimonial.

Notice that i have used the bootstrap media object to align the testimonial images to the left and the the content to the right, it a very useful object that can be used for complex components, you find more details here

HTML :

CSS :

As you can see below i applied the Maven font family to the texts, i added the testimonials quotes using the :after pseudo class and the icons font that we have generated previously, you’ll find the code of the quotes icon inside the icons font files that you have downloaded, in my exemple the code is \e902.

Google Map :

html :

The google map section simply consists of a map container with the id map.

CSS :

I applied a fixed height to the map container and set it’s background color to gray #808080.

Javascript :

I’ll briefly explain the javascript for the Google map, i initialized to Google map API that we have included in the Stylesheet & Javascript files, by setting up the longitude and the latitude, i added additional options to disable the scroll wheel zoom and set the map type to road map, i have also changed the map style to a light gray map that i found in the SnazzyMaps website.

You can find the complete code in the final source files of the project, inside the gmap.js file.

Footer :

Let’s move now to the last section.

HTML :

The footer contains three elements, additional links, social media accounts links, and a full width column for the copyright text, notice i used the bootstrap utility classes text-{xs,md}-right to align the element.

CSS :

I applied the Maven font to the footer links and text, then i styled the social media links, as you can see i used the icons font code in the content property of the :after pseudo class to add the social media icons.

Responsive :

Now we need to add some responsive CSS to our template, to make it look good on small size devices, we’ll start with the Medium size devices and go down from there to the smallest one.

Medium devices :

In medium devices we want the hero section height to take 80% of the viewport height of the device, and the cards text in the project section width to be 100%.

Small devices :

In devices with small size or less, we changed the way the navigation menu collapse, we also reduced the font size of the menu elements as it looks too big on small devices.

Extra Small devices :

lastly in the extra small devices we only changed the hero carousel pagination from a text based pagination to a pagination with small white dots.

That’s it! i hope you have followed this tutorial and liked the final result, if you have any Bootstrap , HTML, CSS or jQuery related questions let me know in the comments section below, i’ll do my best to help you, see soon in the upcoming tutorial,

By the way, if you’ve missed the first part of this tutorial you can find it here, don’t forget join our newsletter and stay updated.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.