Bootstrap Landing

admin

Bootstrap 4 is currently the most popular front-end framework in the world. You can use it to build any kind of user interfaces, from admin templates to full-featured websites. In this step-by-step tutorial, we will have a look at how to build a responsive landing page with Bootstrap 4. You can even use it as a homepage or connect it to a specific marketing campaign.

That’s all folks! This has been a long journey, but hopefully you will have found it worth the effort. I really hope this exercise gave you enough knowledge and inspiration for building awesome landing pages with Bootstrap 4. Don’t forget to check the full screen version and make sure it matches your work.

  1. FlexStart is a responsive modern startup landing page template built Bootstrap 5.0. FlexStart is ideal for showcasing software solutions, SaaS products, web apps, mobile apps and all kind of.
  2. Get the latest high quality free landing page bootstrap website templates. The best landing pages for your product and services. Convert the visitors.

The landing page we will build will have five sections:

  1. a fixed navigation bar,
  2. a hero section,
  3. a three-column “Services” section,
  4. a full-width “Contact” section, and
  5. a footer.

However, following the same logic, you can create other sections for testimonials, blog excerpts, and other content types, too. Here’s how the final landing page will look like:

So, let’s get started.

Bootstrap landing page free download

1. Set Up Bootstrap 4

There are a couple of ways of getting started with Bootstrap 4. You can:

  1. download the compiled CSS and JavaScript and add it to your HTML page,
  2. set up Bootstrap 4 using your own pipeline (choose this if you want to edit Sass files),
  3. use the CDN version of the compiled CSS and JavaScript.

In our example, we will use the first method. Add the minified CSS file to the <head> section of your HTML page and the JavaScript file right before the closing <body> tag. As all Bootstrap 4 plugins depend on jQuery, you also need to include jQuery before the minified Bootstrap script.

Here’s the starter HTML with the compiled CSS and JavaScript files and style.css file for the custom CSS:

2. Create the Navigation Bar

Bootstrap 4 comes with an awesome pre-designed navigation bar component that lets you add a responsive menu to your landing page with just a few lines of HTML. Insert the following code into the <body> section of your HTML file:

The most important thing to know about Bootstrap 4 is that it has a utility class for almost everything. For instance, they have .bg-light (see above) that adds a light background and .bg-dark that adds a dark background to any HTML element. With Bootstrap 4, you can prototype your designs by barely touching any CSS code.

However, as the .fixed-top class fixes the navigation bar to the top, you need to make some extra space for it. So, add the following rule to your custom style.css file. Or, if you don’t want a fixed navigation bar, simply omit the .fixed-top class from your HTML code.

3. Compose the Hero Section

Hero sections are an integral part of most landing pages. They usually include a full-width background image, a headline, a short description, and a call-to-action button. Fortunately, Bootstrap 4 has a pre-designed component called Jumbotron that allows you to easily add a hero section to your page. You need to add the .jumbotron class to the element that will hold the hero section:

If you want a full-width hero section, use the .container-fluid and .jumbotron-fluid classes. If you don’t want it to span the whole viewport, use .container and .jumbotron instead (see detailed explanation in the Jumbotron docs).

The code above also makes use of Bootstrap 4’s .display-3 and .leadtypography classes and the .text-centertext alignment class. Besides, it adds bottom padding to the lead text by using the .pb-4 class. If you want to use other margin and padding sizes check out how Bootstrap 4’s spacing classes work. For instance, the .pb-4 class adds the padding-bottom: 1.5rem !important; rule to any HTML element.

You also need to add a background image to the Jumbotron section in your custom style.css file. If you want you can override the background color of primary buttons, too:

Here’s how our example landing page looks like so far, with the navigation bar and the hero section:

4. Create a Three-Column Section to Showcase Services

To create a three-column Services section, use Bootstrap 4’s responsive grid system consisting of rows and columns that divide up the screen. By default, every row contains 12 columns (however, you can change this in your Sass settings). You can indicate the number of columns you want to use within the name of the column class. For example, .col-4 takes up 4 columns out of the 12.

Bootstrap 4 has five responsive breakpoints that define five grids: extra small (default), small, medium, large, and extra large. As the breakpoints are based on minimum width media queries, the column classes apply to their own grid and all the grids above.

Bootstrap Landing Page Free Download

For instance, in the code below, .col-md-4 applies to the medium, large, and extra large grids. This means that tablets and desktops will display the Services section in 3 equal columns next to each other. And, smartphones with extra small and small viewports will display them below each other (one column per row).

The code above also makes use of Bootstrap 4’s Card component that comes with five pre-built classes: .card, .card-img-top, .card-body,.card-title, and .card-text. The .h-100 class is one of Bootstrap 4’s sizing utility classes you can use on any element you want. It sets the height of each card to 100%.

You can also override the design of secondary buttons in your style.css file to match it with the rest of your landing page, for example:

Here is how the three-column Services section looks like on desktop (on mobile, the three cards will be under each other):

5. Add a Full-Width Contact Section

You can add a full-width Contact section to your landing page using Bootstrap 4’s utility classes:

Similar to the Jumbotron section, you also need to add a background image to the Contact section in your style.css file:

Here’s how the Contact section looks like:

6. Create the Footer

Landing pages usually have simple footers, so the code below simply adds a copyright notice to the bottom of the page:

And, we are done! Here’s again how the entire landing page created with Bootstrap 4 looks like:

Wrapping Up

In this article, we have created a fairly simple landing page. In the real world, it would have other sections as well, such as key features, pricing tables, client logos, and testimonials. Using Bootstrap 4’s responsive grid system, you can easily create other column-based sections as well, similar to the Services section.

Bootstrap 4 also has multiple pre-built components such as forms, modals, carousels, and more. Before you begin to add anything to your design, always check out the docs, as the Bootstrap team might have already built it for you.

If you want to add a functioning Contact form to your landing page, you can use Google Forms to process the form in the backend. Besides Bootstrap 4, you can also create responsive landing pages with the CSS grid. To see how it works, have a look at our step-by-step guide of how to create a custom CSS grid.

Your landing page is fundamental in persuading new visitors to take certain actions when visiting your site. Whether it be having users sign up, register, or even buy your product or service, designing an excellent landing page will help you realise this goal.

But how do you quickly build a quality landing page? Using a powerful and flexible landing page template may be your best choice. Most HTML5, Bootstrap, and CSS3 templates include features that can help you effortlessly create a page. In addition, web designers and developers readily share free responsive landing page templates on the Internet for you to use. Mockplus has hand-picked 20 of the best free responsive HTML5, CSS3, Bootstrap, and WordPress landing page templates in 2018 that you can quickly implement in your project.

5 Best Free Responsive Html5 Landing Page Templates In 2018

There are 5 fully customizable and responsive landing page templates for your inspiration.

1. Clymene - Creative Multipurpose HTML/Wordpress Template


Clymene, built with html5 and css3, is a perfect and versatile HTML template for creative portfolio websites. This multipurpose template has every detail covered, so it’s perfect for everything from bloggers, freelancers and photographers to restaurants, commercial stores and travel agencies. This template makes your portfolio display in a classic grid or in the Pinterest-style masonry layout that maximizes the space on the page, creating a more engaging user experience.

Features:

  • Free WordPress version
  • One page 3d menu
  • Pre-built website variants
  • Touch swipe support
  • Mixed masonry and grid portfolio
  • Premium slider, slider revolution (worth $14)
  • Ajax and external portfolio page examples built-in

2. Sukces - Responsive HTML5 and CSS3 template for Personal Resume CV

Sukces is a powerful personal resume cv html5 / css3 template based on Bootstrap 3 framework. This template has beautiful design & effects, including video background, slideshow background, blog, a working contact form, lots of useful components, 8 color schemes and effective components, etc. All these features make it perfect for a one page personal website. Based on Bootstrap 3, the template is responsive by default and has all the common elements styled, assuring that it will look and work awesomely on any device.

Features:

  • 10 Demo versions
  • RTL Support
  • Serif & Sans Serif versions
  • Made with SASS
  • Awesome Documentation
  • Retina ready
  • Easy to setup

3. Meal - One Page HTML Template

Page

Meal is a free One Page HTML restaurant template built by Free-Template.co. This template has many unique features, including neat load transitions, an off-canvas navigation, a food menu (with breakfast, lunch, dinner switcher), chef profiles, a customer review slider, reservation form and a smart footer with Google Maps integration. There are lot of landing page design examples made by this template.

Features:

  • Booking Form
  • Food Menu
  • Google Maps
  • Load Transitions
  • Long Scrolling Newsletter
  • Team Testimonials

4. Tinos - Premium Booking Hotel HTML Template

Tinos is a creative and clean template specially designed and developed for hotels, resorts and room reservations. Tinos has two versions (Dark & Light), both of which features a clean and trendy design. The great combination of the Tinos and Montserrat fonts evokes the feel of luxury to anyone using this template. The design is very creative, unique, and very easy to customize.

Features:

  • 30 HTML files included
  • Convert files to Wordpress, Joomla or other CMS
  • Customize with 1170px grid
  • Pixel perfect,
  • Bootstrap Grid

5. Housing - Parallax Landing Page Template for Real Estate

Housing is modern & clean real estate landing page template for Real Estate. This template can help to convert your visitors into future clients, so it’s popular for real estate developers, architects, agencies or any business related to real estate. The beautiful minimal and clean design provides a pleasant user experience to any user that visits your site. You can even learn a few landing page design tricks from this one.

Features:

  • Landing Page for Real Estate, Architects or Developers
  • Parallax Effects
  • Google Map
  • Bootstrap 4
  • Responsiveness

5 Best Free Responsive Bootstrap Landing Page Templates In 2018

A free collection including Bootstrap built landing page, home page, themes and templates.

6. Business Casual - A Fully Developed Bootstrap 4 Landing Page Template For Business Websites

Business Casual is a full landing page template created with Bootstrap 4. It is responsive and supports the latest and stable releases of all major browsers and platforms. It has 4 pre-built HTML pages and a number of different custom-styled components.

Features:

  • Fully responsive
  • Bootstrap 4
  • Four pre-built HTML pages
  • Store hours script that updates with the current day

7. New Age - A bold and colorful Bootstrap landing page theme for web apps or other business use

New Age has a Bootstrap landing page theme that helps you showcase your web apps. Just drop in content, you can easily use HTML5/CSS Device mockups on it. This theme features a bold, colorful and stylish design with various content sections, custom fixed navigation menu with scrolling animations and custom style buttons.

Features:

  • Support the latest, stable releases of all major browsers and platforms
  • Fully responsive HTML template created with Bootstrap 4
  • SASS/SCSS files included for deeper customization options
  • Semantic markup with nav, sections, and asides
  • CSS gradient with texture overlay in the header

8. Freelancer - A one page Bootstrap portfolio theme for freelancers featuring a custom portfolio grid

Freelancer is a one page Bootstrap portfolio landing page theme for freelancers.It features a fixed top navigation that collapses on scroll, perfectly responsive portfolio grid with hover effects and custom horizontal rules using Font Awesome icons. It’s a fully responsive HTML template created with Bootstrap 4. Moreover, it has a responsive, full screen modal windows for featuring project details.

Features:

  • Flat icons by flaticons.com
  • SCSS/SASS files and compiled CSS included
  • Scrollspy on navigation items
  • Custom outline button style
  • Mobile friendly contact form with floating form labels
  • Easy to edit PHP file to make the contact form send messages
  • Includes jqBootstrapValidation plugin for contact form validation

9. Appy - App Landing Page HTML Template Based on Bootstrap 1170px

Appy is an app landing page that was designed for selling mobile applications. It has creative, modern design elements, unlimited colors, smooth transitions, parallax scrolling websitebackgrounds, Google fonts and Mailchimp integration. It has good customer service with 6 months support. Appy includes every possible element an app landing page should contain.

Features:

  • Lead gen & Click through
  • Campaign Monitor
  • Based on Bootstrap 1170px
  • Valid HTML5 / CSS3
  • Retina ready

10. Grayscale - A free, multipurpose, one page Bootstrap theme featuring a dark color scheme and smooth scrolling animations

Grayscale, a fully responsive HTML template created with Bootstrap 4, is built to support the latest, stable releases of all major browsers and platforms. It’s a multipurpose, one page website theme and features a dark layout along with smooth scrolling page animations.

Features:

  • SCSS/SASS files and compiled CSS included
  • Fixed top navigation that collapses on scroll
  • Smooth scrolling animations
  • Scrollspy that highlights active page sections
  • Custom button styles

5 Best Free Landing Page Templates Of Wordpress Theme

WordPress is one of the most popular CMS platforms on the web. Here you will find the best landing page theme for your WordPress website.

11. Mcgillis - University Free WordPress landing page theme for Higher Education

Mcgillis is a minimalist Wordpress landing page template designed to help users choose a good school. It’s a free template for education only, so if you are going to create a website for education, it’s your best choice. The best part is the excellent form design, which displays what's awesome about your university and why people should they apply. The inclusion of social proof and authentic testimonial makes this template really useful.

Features:

  • Industry specific
  • Wordpress theme
  • Responsiveness

12. Moto - WordPress Landing Page Theme

Moto is a responsive, clean and modern designed WordPress Theme for landing pages. It features a neat, clean and simple design, unlimited color variation, blog page, Google fonts, font awesome icons, line icons and the like. Of particular note is the fast drag and drop page builder which is also easy to customize.

Features:

  • Valid HTML5, CSS3
  • Theme Layout [Full Width, Boxed]
  • Built Based on King Composer
  • Fully Responsive
  • Well Documented
Bootstrap landing page design

13. Gaze-Responsive Multipurpose WordPress Theme for E-commerce

Gaze is a premium multipurpose WordPress theme that is designed and developed with simplicity and flexibility in mind. Thisecommerce landing page template has over 18 home demos with unique styles and functionality and more than 100 modules and elements. It best for startup websites, portfolios, digital agencies, business companies, landing pages, online stores and personal websites.

Features:

  • Responsive Bootstrap grid
  • Built with clean semantic PHP code
  • File Types include CSS, JS, PHP, PSD
  • Visual Composer and WooCommerce
  • PSD Files Included

14. Stash - Multi-Purpose WordPress Theme with Visual Composer Block Builder

Stash is an intuitive, flexible and powerful WordPress theme for business websites. It features a pre-made layout which assures your content displays well. The theme includes the most popular premium plugins on the market: Visual Composer, Revolution Slider and Essential Grid.You c an create almost any type of layout by simply using the drag-and-drop interface and tons of pre-built elements.

Features:

  • Built with utility in mind
  • Ready made layouts
  • Set of plugins
  • Translation ready and compatible with the WPML plugin


15. Photosy - One Page WordPress Theme

Photosy is a WordPress theme by Theme Bubble designed to suit the needs of photography websites of all sizes. The theme includes the best landing page examples, which feature long-scrolling single page layouts. The most interesting features include intro project carousel, an Instagram feed, blog posts and projects that pop with several options, full canvas view, zoom, full screen, auto-play slideshow and even an option to download the images.

Features:

  • 100% width layout
  • Big images
  • Blog feed
  • Instagram feed
  • Long scrolling
  • Slider slideshow
  • Theme bubble


5 Other Landing Page Template

We want to share more landing page templates with you to build your own preferred website.

16. Atlas - One Page HTML Landing Page Template

Atlas is a quality freebie by front-end developer Yiya Chen. This free One Page HTML template was built on the Bootstrap Framework and is suited for a clean, long-scrolling landing page. It includes clear typography, content load transitions, trendy diagonal lines, devices with screenshots, a 3-tier pricing table, client logos and ends with a contact form.

Features:

  • Logos Contact
  • Form Devices
  • Diagonal Lines
  • Load Transitions
  • Long Scrolling
  • Pricing Table
  • Social Icons


17. Product landing page - promotional page website template

Product landing page is one of the popular template released by WIX. It is designed especially to suit the needs of business websites that have a promotion plan. This template has a rich interface design and a special commodities section.

Features:

Bootstrap landing page theme
  • Responsive design
  • Google fonts support
  • Excellent form design

18. Drew - All in One Marketing Landing Page

Drew is a robust landing page template that meets all the needs that your landing page requires. The most exciting thing is the combination of beautiful design & the perfect marketing approach to the web surface, while keep providing the excellent performance and functionality to your end users. Moreover, it includes plenty of components and variations.

Features:

  • Bootstrap Framework (v3.3)
  • 470++ Icon Integration
  • Parallax Effect (optional)
  • Modular CSS Classes
  • Optimized for Performance
  • Detailed & Straight Forward Documentation
  • Subscription Form via Mailchimp Integration

19. Delta - Promote Mobile App (Bootstrap 4)

Delta is an HTML5 landing page template which aims to help app developers promote their mobile apps. You can just drop in your content/images and wire up the contact form to quickly build your site for its simplicity and straightforwardness.

Bootstrap 4 Landing Page Template

Features:

  • Built on Bootstrap 4
  • HTML5 + CSS
  • SCSS source files included
  • Fully responsive
  • 3 types of mobile devices

20. Prottasha - Bootstrap 4 Charity Landing Page

Prottasha is a professional HTML5 landing page template designed to suit the need of any charity, non-profit, NGO or donation-based website. It’s made with the latest version of the Bootstrap framework. This template comes with a clean look and feel, stylish & modern styling, including 11 unique HTML pages, 4 different home pages, 3 blog pages, 12 different types of pre-made color schemes and more.

Features:

  • Amazing four Homepage layouts
  • Full-width stunning sliders
  • 100% responsive and compatible with all devices
  • Build with the latest version of Bootstrap, HTML5, and CSS3
  • Well-optimized and clean code
  • W3C Validate Codes

7 Best Landing Page Template Websites Resources For Your Inspiration

Bootstrap Landing Page Tutorial

1. https://startbootstrap.com/template-categories/lan...

A collection of free, Bootstrap built landing pages and home page themes and templates.

2. https://unbounce.com/landing-page-templates/

100+ Conversion-focused Templates.

3. https://elements.envato.com/all-items/landing+page

Fully customizable and responsive landing page templates.

4. https://wrapbootstrap.com/themes/landing-pages

Landing Page Templates.

5. https://onepagelove.com/templates/landing-page-tem...

125 One Page Landing Page Templates.

6. https://www.templatemonster.com/landing-page-templ...

Easy and powerful landing page templates.

7. https://www.wix.com/website/templates/html/landing...

The nest landing page website template you will love.

Bootstrap Landing Page

Above are the 20 Best Free HTML5, CSS3, Bootstrap, and WordPress landing page templates for 2018. We hope these templates will help you create responsive websites with less time and effort. And don’t forget to give Mockplus (Rapid Prototyping Tool) a go when building your next app!

Bootstrap Landing Page With Background Image

Get Started for Free