Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Two Column Grid Layouts for Tablets and Desktops</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 15px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<h2 class="text-center mt-3">Bootstrap Responsive Layout</h2>
<div class="text-center my-3">Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works.</div>
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-6">
<div class="demo-content">.col-md-6</div>
</div>
<div class="col-md-6">
<div class="demo-content bg-alt">.col-md-6</div>
</div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-md-4">
<div class="demo-content">.col-md-4</div>
</div>
<div class="col-md-8">
<div class="demo-content bg-alt">.col-md-8</div>
</div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-md-3">
<div class="demo-content">.col-md-3</div>
</div>
<div class="col-md-9">
<div class="demo-content bg-alt">.col-md-9</div>
</div>
</div>
</div>
</body>
</html>Bootstrap three column grid layouts for tablets in landscape mode and desktops
Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Three Column Grid Layouts for Tablets (landscape) and Desktops</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 15px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<h2 class="text-center mt-3">Bootstrap Responsive Layout</h2>
<div class="text-center my-3">Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works.</div>
<div class="container">
<!--Row with three equal columns-->
<div class="row">
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content bg-alt">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
</div>
<!--Row with three columns divided in 1:4:1 ratio-->
<div class="row">
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
<div class="col-lg-8">
<div class="demo-content bg-alt">.col-lg-8</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
<!--Row with three columns divided unevenly-->
<div class="row">
<div class="col-lg-3">
<div class="demo-content">.col-lg-3</div>
</div>
<div class="col-lg-7">
<div class="demo-content bg-alt">.col-lg-7</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
</div>
</body>
</html>Bootstrap auto layout columns for all devices
Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Auto-layout Columns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.row{
margin-top: 1rem;
background: #dbdfe5;
}
.col{
padding: 10px 15px;
background: #abb1b8;
border: 1px solid rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!--Row with three equal columns-->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
</body>
</html>Bootstrap columns sizing based on the width of their content
Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sizing Columns Based on the Width of their Content</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.row{
margin-top: 1rem;
background: #dbdfe5;
}
[class^=col]{
padding: 10px 15px;
background: #abb1b8;
border: 1px solid rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3">Column left</div>
<div class="col-md-auto">Variable width column</div>
<div class="col-md-3">Column right</div>
</div>
<div class="row">
<div class="col">Column left</div>
<div class="col-auto">Variable width column</div>
<div class="col">Column right</div>
</div>
</div>
<p class="text-center mt-3"><strong>Note:</strong> Enter some more content inside the variable width column to understand how it works.</p>
</body>
</html>Bootstrap multi column grid layout for all devices
Example 5
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Grid Layouts for All Devices</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
</style>
</head>
<body>
<h2 class="text-center mt-3">Bootstrap Responsive Layout</h2>
<div class="text-center my-3">Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works.</div>
<div class="container-lg">
<div class="row">
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 1</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 2</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 3</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 4</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 5</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 6</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 7</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 8</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 9</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 10</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 11</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 12</p></div>
</div>
</div>
</body>
</html>Bootstrap nested grid columns layout
Example 6
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Nested Rows and Columns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.main-content{
min-height: 230px;
background: #dbdfe5;
}
.sidebar-content{
min-height: 100px;
margin-bottom: 30px;
background: #b4bac0;
}
</style>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-sm-8">
<div class="main-content"></div>
</div>
<div class="col-sm-4">
<!--Nested rows within a column-->
<div class="row">
<div class="col-12">
<div class="sidebar-content"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="sidebar-content"></div>
</div>
<div class="col-6">
<div class="sidebar-content"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Bootstrap vertical alignment of columns within a row
Example 7
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Vertical Alignments of Grid Columns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.row{
min-height: 10rem;
margin-top: 1rem;
background: #dbdfe5;
}
.col{
padding: 10px 15px;
background: #abb1b8;
border: 1px solid rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="container">
<div class="row align-items-start">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-center">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-end">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>
</body>
</html>Bootstrap vertical alignment of individual columns within a row
Example 8
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Vertical Alignments of Individual Grid Columns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.row{
min-height: 10rem;
margin-top: 1rem;
background: #dbdfe5;
}
.col{
padding: 10px 15px;
background: #abb1b8;
border: 1px solid rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>
</body>
</html>Bootstrap reordering of grid columns within a row
Example 9
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reorder Grid Columns in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.row{
margin-top: 1rem;
background: #dbdfe5;
}
.col{
padding: 10px 15px;
background: #abb1b8;
border: 1px solid rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col order-last">First, but ordered at last</div>
<div class="col">Second, but unordered</div>
<div class="col order-first">Last, but ordered at first</div>
</div>
</div>
</body>
</html>Bootstrap offsetting grid columns
Example 10
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Columns Offsetting</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-4">
<div class="demo-content">.col-md-4</div>
</div>
<div class="col-md-8">
<div class="demo-content bg-alt">.col-md-8</div>
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-4">
<div class="demo-content bg-alt">.col-md-8 .offset-md-4</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="demo-content">.col-md-3</div>
</div>
<div class="col-md-9">
<div class="demo-content bg-alt">.col-md-9</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="demo-content bg-alt">.col-md-6 .offset-md-3</div>
</div>
<div class="col-md-3">
<div class="demo-content">.col-md-3</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="demo-content">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="demo-content bg-alt">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="demo-content">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="demo-content bg-alt">.col-md-3</div>
</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">
<div class="demo-content bg-alt">.col-md-3 .offset-md-3</div>
</div>
<div class="col-md-3 offset-md-3">
<div class="demo-content">.col-md-3 .offset-md-3</div>
</div>
</div>
</div>
</body>
</html>Bootstrap compact grid columns
Example 11
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Compact Columns</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
min-height: 50px;
background: #dbdfe5;
margin-bottom: 15px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<h2 class="text-center">Columns with Gutters</h2>
<div class="container mt-3">
<div class="row">
<div class="col-4">
<div class="demo-content">.col-4</div>
</div>
<div class="col-4">
<div class="demo-content bg-alt">.col-4</div>
</div>
<div class="col-4">
<div class="demo-content">.col-4</div>
</div>
</div>
</div>
<hr>
<h2 class="text-center">Columns without Gutters</h2>
<div class="container mt-3">
<div class="row g-0">
<div class="col-4">
<div class="demo-content">.col-4</div>
</div>
<div class="col-4">
<div class="demo-content bg-alt">.col-4</div>
</div>
<div class="col-4">
<div class="demo-content">.col-4</div>
</div>
</div>
</div>
</body>
</html>Bootstrap fixed layout
Example 12
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fixed Layout Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand">CodedSkills</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="p-5 my-4 bg-light rounded-3">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://codedskills.net/forum" class="text-success" target="_blank">CodedSkills.net</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2022 Codedskills.net</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>Bootstrap fluid layout
Example 13
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Fluid Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand">CodedSkills</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
<a href="#" class="nav-item nav-link">Register</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="p-5 my-4 bg-light rounded-3">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://codedskills.net/forum" class="text-success" target="_blank">CodedSkills.net</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2022 Codedskills.net</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>
</body>
</html>Bootstrap responsive layout
Example 14
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Responsive Layout</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand">CodedSkills</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
<a href="#" class="nav-item nav-link">Register</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="p-5 my-4 bg-light rounded-3">
<h1>Learn how to code.</h1>
<p class="lead">We are one big community working together towards amazing things! </p>
<p><a href="https://codedskills.net/forum" target="_blank" class="btn btn-dark btn-lg">Get started today</a></p>
</div>
<div class="row g-3">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=9" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML5</h2>
<p>HTML5 is a markup language used for structuring and presenting content on the internet. It is the fifth and final major HTML version.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=54" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS3</h2>
<p>CSS3 is used with HTML to create and format content structure. It is responsible for colours, font properties, text alignments, background images, graphics, tables, etc. It provides the positioning of various elements with the values being fixed, absolute, and relative.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=55" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=47" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>JavaScript</h2>
<p>JavaScript is a programming language that is one of the core technologies of the internet </p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=44" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. </p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=57" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>PHP</h2>
<p>PHP is a general-purpose scripting language geared toward web development.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=40" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>SQL</h2>
<p>SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system.</p>
<p><a href="https://codedskills.net/forum/viewforum.php?f=58" target="_blank" class="btn btn-dark">Learn More »</a></p>
</div>
</div></div></div></div></div></div>
</div></div></div></div></div></div>
<footer></div></div>
<br><br><br><br><br> <br><br><br><br><br>
<center><p><BODY TEXT="black"><a href="https://www.facebook.com/CodedAdmin"><f style="color:black">Visit our facebook page!</a></BODY></center>
<center><p><BODY TEXT="black"><a href="https://www.facebook.com/groups/1960554790806573"><f style="color:black">and our facebook group!</a></BODY></center>
<center><h4><BODY TEXT="black"><a href="https://codedskills.net/forum"><f style="color:black">_____________Copyright © CodedSkills.net 2022_____________</a></BODY></center>
<center><h4><BODY TEXT="black"><a href="https://codedskills.org"><f style="color:black">_____________Copyright © CodedSkills.org 2022._____________</a></BODY></center>
<center><h4><BODY TEXT="black"><a href="https://www.facebook.com/CodedSkillsAdmin"><f style="color:black">___________________Copyright © CodedSkillsAdmin <-->Coded Jim<-->___________________</a></BODY></center><br>
</footer></div>
<!--Copyright © CodedSkillsAdmin-->
</body>
</html>