Home Page Bootstrap

Posted onby admin
  1. Home Page For Yahoo
  2. Home Page Template
  3. Home Page Bootstrap Code
  4. Simple Html Templates Free Download
  5. Home Page Template Bootstrap 4 Free
  6. Shop Home Page Bootstrap
  7. Basic Html And Css Template
  1. App Landing Page, Bootstrap Templates, Business If you are a developer with a new product on the horizon, the mobile app website template, Appy, is one you should not miss. It is a one-page website template with all the necessary elements and outstanding characteristics.
  2. 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.

Bootstrap Image Shapes

Circle:

And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.

Rounded Corners

The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):

Example

<img src='cinqueterre.jpg' alt='Cinque Terre'>
Try it Yourself »

Circle

The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

Example

<img src='cinqueterre.jpg' alt='Cinque Terre'>
Try it Yourself »

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail:

Example

Home Page Bootstrap
<img src='cinqueterre.jpg' alt='Cinque Terre'>
Try it Yourself »

Responsive Images

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:

Example

<img src='img_chania.jpg' alt='Chania'>
Try it Yourself »

Image Gallery

You can also use Bootstrap's grid system in conjunction with the .thumbnail class to create an image gallery.

Note: You will learn more about the Grid System later in this tutorial (how to create a layout with different amount of columns).

Example

<div>
<div>
<div>
<a href='/w3images/lights.jpg'>
<img src='/w3images/lights.jpg' alt='Lights'>
<div>
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div>
<div>
<a href='/w3images/nature.jpg'>
<img src='/w3images/nature.jpg' alt='Nature'>
<div>
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div>
<div>
<a href='/w3images/fjords.jpg'>
<img src='/w3images/fjords.jpg' alt='Fjords'>
<div>
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
Try it Yourself »

Responsive Embeds

Also let videos or slideshows scale properly on any device.

Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

The following example creates a responsive video by adding an .embed-responsive-item class to an <iframe> tag (the video will then scale nicely to the parent element). The containing <div> defines the aspect ratio of the video:

Example

<div>
<iframe src='...'></iframe>
</div>
Try it Yourself »

What is aspect ratio?
The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).

You can choose between two aspect ratio classes:

<!-- 16:9 aspect ratio -->
<div>
<iframe src='...'></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div>
<iframe src='...'></iframe>
</div>
Try it Yourself »

Complete Bootstrap Image Reference

For a complete reference of all image classes, go to our complete Bootstrap Image Reference.

Free

Home Page For Yahoo



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.

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.

Home Page Template

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.

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

Home Page Bootstrap Code

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.

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):

Home Page BootstrapHome

5. Add a Full-Width Contact Section

Simple Html Templates Free Download

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:

Home Page Template Bootstrap 4 Free

Wrapping Up

Shop Home Page Bootstrap

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.

Basic Html And Css Template

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.