🎉
Windframe Form builder is finally here.
postImage

Full Website Layout

blogImage

By Emmanuel Chinonso

Web Developer

Contrast Bootstrap UI Kit

Website Layout

A website is often divided into headers, menus, content and a footer.

Website Layout

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header: A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

CSS Code:

css
.header {
background-color: #f1f1f1;
text-align: center;
padding: 20px;
}

Navigation Bar: A navigation bar contains a list of links to help visitors navigating through your website:

CSS Code:

css
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

Content: The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

1-column (often used for mobile browsers)

2-column (often used for tablets and laptops)

3-column layout (only used for desktops).

CSS Code:

css
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}

To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Unequal Columns: The main content is the biggest and the most important part of your site.It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

CSS Code:

css
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Responsive layout - makes the three columns stack on top of
each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}

Footer: The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

CSS Code:

css
.footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}

Contrast Bootstrap UI Kit

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...