Creating Home Page in ASP.NET with Bootstrap Styling
In this 4th tutorial on dynamic web application development, we will learn how to create a static home page in ASP.NET. We will create the static home page in asp.net & also do its styling using bootstrap framework.
Watch the video tutorial at the end of this video to understand more about how to create master page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
Home Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="homepage.aspx.cs" Inherits="WebApplication3.homepage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<section>
<img src="imgs/home-bg.jpg" class="img-fluid"/>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<center>
<h2>Our Features</h2>
<p><b>Our 3 Primary Features -</b></p>
</center>
</div>
</div>
<div class="row">
<div class="col-md-4">
<center>
<img width="150px" src="imgs/digital-inventory.png"/>
<h4>Digital Book Inventory</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
<div class="col-md-4">
<center>
<img width="150px" src="imgs/search-online.png"/>
<h4>Search Books</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
<div class="col-md-4">
<center>
<img width="150px" src="imgs/defaulters-list.png"/>
<h4>Defaulter List</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
</div>
</div>
</section>
<section>
<img src="imgs/in-homepage-banner.jpg" class="img-fluid"/>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<center>
<h2>Our Process</h2>
<p><b>We have a Simple 3 Step Process</b></p>
</center>
</div>
</div>
<div class="row">
<div class="col-md-4">
<center>
<img width="150px" src="imgs/sign-up.png" />
<h4>Sign Up</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
<div class="col-md-4">
<center>
<img width="150px" src="imgs/search-online.png"/>
<h4>Search Books</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
<div class="col-md-4">
<center>
<img width="150px" src="imgs/library.png"/>
<h4>Visit Us</h4>
<p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p>
</center>
</div>
</div>
</div>
</section>
</asp:Content>CSS Style (customstylesheet.css)-
.footerlinks {
color: #ffffff;
text-decoration: none !important;
}
.footerlinks:hover {
color: #ffd800;
}
#footer1 {
background: #762b00;
}
#footer2 {
background: #531f00;
}