Bootstrap Snippet Bootstrap section with navigation and image using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!--font-->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Spartan:wght@100&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!--1 section-->
<header class="bg-light pt-2">
       <div class="container">
            <div class="row">
                 <!--social media bar-->
                 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                      <ul class="nav">
                          <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="facebook" width="20px"></span></a></li>
                          <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124021.png" alt="facebook" width="20px"></span></a></li>
                          <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124013.png" alt="facebook" width="20px"></span></a></li>
                          <li><a href="#"><span><img src="https://image.flaticon.com/icons/png/512/124/124011.png" alt="facebook" width="20px"></span></a></li>
                      </ul>
                 </div>
                 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
       h1 {
            font-family: 'Abril Fatface', cursive;}
      ul li a {
        margin-right: 15px;}
      .third {
        background-color: #6c757d26;
        background-image: url(https://www.jesusislife.in/wp-content/uploads/2019/05/Savin-NY-Website-Background-Web.jpg) !important;
        height: 400px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;}
      .jumbotron {
        background-color: #e9ecef00 !important;
        padding: 2rem 2rem;
        border-radius: 0rem;}
      .jumbotron h1 {
        margin-top: 2pc;
        font-size: 4pc;}
      .fourth {
        margin-top: -80px;}
      .navbar-dark .navbar-nav .nav-link {
        color: rgb(255 255 255) !important;
        font-family: 'Comfortaa', cursive;}
      .fourth h4 {
        font-family: 'Comfortaa', cursive;
        margin-top: 15px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap section with navigation and image"
Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Bootstrap section with navigation and image" Bootstrap 4.1.1 Snippet by anjalish

Related: See More

Questions / Comments:

"Bootstrap section with navigation and image"
Bootstrap 4.1.1 Snippet by anjalish