Categories

Friday, April 19, 2024
#919814419350 therichposts@gmail.com
Bootstrap 4LaravelLaravel 8

Build Professional Website in Laravel 8.16 Bootstrap 4.6

Build Professional Website in Laravel 8.16 Bootstrap 4.6

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Build Professional Website in Laravel 8.16 Bootstrap 4.6.

Laravel 8 Website

Build Professional Website in Laravel 8.16 Bootstrap 4.6
Build Professional Website in Laravel 8.16 Bootstrap 4.6

Guys please check below link for more laravel 8 posts:


Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Now friends, here is the complete working code snippet

and I have added inside my laravel 8: projectname/resources/views/ welcome.blade.php file for showing you working example but you can add according to your requirement:

I have added bootstrap live cdn’s for template working

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Custom Styles -->
<style>
  @import url("https://use.fontawesome.com/releases/v5.0.8/css/all.css");
  @import url("https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css");
  @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic");
  body {
      font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif!important;
  }
  .features-icons {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
    .features-icons .features-icons-item {
      max-width: 20rem;
    }
    .features-icons .features-icons-item .features-icons-icon {
      height: 7rem;
    }
    .features-icons .features-icons-item .features-icons-icon i {
      font-size: 4.5rem;
    }
    .features-icons .features-icons-item:hover .features-icons-icon i {
      font-size: 5rem;
    }
    
    header.masthead {
      position: relative;
      background-color: #343a40;
      background: url("../assets/img/bg-masthead.jpg") no-repeat center center;
      background-size: cover;
      padding-top: 8rem;
      padding-bottom: 8rem;
    }
    header.masthead .overlay {
      position: absolute;
      background-color: #212529;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0.3;
    }
    header.masthead h1 {
      font-size: 2rem;
    }
    @media (min-width: 768px) {
      header.masthead {
        padding-top: 12rem;
        padding-bottom: 12rem;
      }
      header.masthead h1 {
        font-size: 3rem;
      }
    }
    
    .showcase .showcase-text {
      padding: 3rem;
    }
    .showcase .showcase-img {
      min-height: 30rem;
      background-size: cover;
    }
    @media (min-width: 768px) {
      .showcase .showcase-text {
        padding: 7rem;
      }
    }
    
    .testimonials {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
    .testimonials .testimonial-item {
      max-width: 18rem;
    }
    .testimonials .testimonial-item img {
      max-width: 12rem;
      box-shadow: 0px 5px 5px 0px #adb5bd;
    }
    
    .call-to-action {
      position: relative;
      background-color: #343a40;
      background: url("../assets/img/bg-masthead.jpg") no-repeat center center;
      background-size: cover;
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
    .call-to-action .overlay {
      position: absolute;
      background-color: #212529;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0.3;
    }
    
    footer.footer {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
      font-weight: 700;
  }
</style>    
</head>
<body>
  <!-- Navigation-->
  <nav class="navbar navbar-light bg-light static-top">
      <div class="container">
          <a class="navbar-brand" href="#!">Therichpost</a>
          <a class="btn btn-primary" href="#!">Sign In</a>
      </div>
  </nav>
  <!-- Masthead-->
  <header class="masthead text-white text-center">
      <div class="overlay"></div>
      <div class="container">
          <div class="row">
              <div class="col-xl-9 mx-auto"><h1 class="mb-5">Build a landing page for your business or project and generate more leads!</h1></div>
              <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                  <form>
                      <div class="form-row">
                          <div class="col-12 col-md-9 mb-2 mb-md-0"><input class="form-control form-control-lg" type="email" placeholder="Enter your email..." /></div>
                          <div class="col-12 col-md-3"><button class="btn btn-block btn-lg btn-primary" type="submit">Sign up!</button></div>
                      </div>
                  </form>
              </div>
          </div>
      </div>
  </header>
  <!-- Icons Grid-->
  <section class="features-icons bg-light text-center">
      <div class="container">
          <div class="row">
              <div class="col-lg-4">
                  <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                      <div class="features-icons-icon d-flex"><i class="icon-screen-desktop m-auto text-primary"></i></div>
                      <h3>Laravel 8+ Responsive</h3>
                      <p class="lead mb-0">This theme will look great on any device, no matter the size!</p>
                  </div>
              </div>
              <div class="col-lg-4">
                  <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                      <div class="features-icons-icon d-flex"><i class="icon-layers m-auto text-primary"></i></div>
                      <h3>Bootstrap 4.6 Ready</h3>
                      <p class="lead mb-0">Featuring the latest build of the new Bootstrap 4 framework!</p>
                  </div>
              </div>
              <div class="col-lg-4">
                  <div class="features-icons-item mx-auto mb-0 mb-lg-3">
                      <div class="features-icons-icon d-flex"><i class="icon-check m-auto text-primary"></i></div>
                      <h3>Easy to Use</h3>
                      <p class="lead mb-0">Ready to use with your own content, or customize the source files!</p>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!-- Image Showcases-->
  <section class="showcase">
      <div class="container-fluid p-0">
          <div class="row no-gutters">
              <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('assets/img/bg-showcase-1.jpg')"></div>
              <div class="col-lg-6 order-lg-1 my-auto showcase-text">
                  <h2>Fully Responsive Design</h2>
                  <p class="lead mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
              </div>
          </div>
          <div class="row no-gutters">
              <div class="col-lg-6 text-white showcase-img" style="background-image: url('assets/img/bg-showcase-2.jpg')"></div>
              <div class="col-lg-6 my-auto showcase-text">
                  <h2>Updated For Bootstrap 4.6</h2>
                  <p class="lead mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
              </div>
          </div>
          <div class="row no-gutters">
              <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('assets/img/bg-showcase-3.jpg')"></div>
              <div class="col-lg-6 order-lg-1 my-auto showcase-text">
                  <h2>Easy to Use & Customize</h2>
                  <p class="lead mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
              </div>
          </div>
      </div>
  </section>
  <!-- Testimonials-->
  <section class="testimonials text-center bg-light">
      <div class="container">
          <h2 class="mb-5">What people are saying...</h2>
          <div class="row">
              <div class="col-lg-4">
                  <div class="testimonial-item mx-auto mb-5 mb-lg-0">
                      <img class="img-fluid rounded-circle mb-3" src="assets/img/testimonials-1.jpg" alt="..." />
                      <h5>Jassa E.</h5>
                      <p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
                  </div>
              </div>
              <div class="col-lg-4">
                  <div class="testimonial-item mx-auto mb-5 mb-lg-0">
                      <img class="img-fluid rounded-circle mb-3" src="assets/img/testimonials-2.jpg" alt="..." />
                      <h5>Jassa S.</h5>
                      <p class="font-weight-light mb-0">"Laravel Bootstrap combination is amazing. I've been using it to create lots of super nice landing pages."</p>
                  </div>
              </div>
              <div class="col-lg-4">
                  <div class="testimonial-item mx-auto mb-5 mb-lg-0">
                      <img class="img-fluid rounded-circle mb-3" src="assets/img/testimonials-3.jpg" alt="..." />
                      <h5>Jassa W.</h5>
                      <p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!-- Call to Action-->
  <section class="call-to-action text-white text-center">
      <div class="overlay"></div>
      <div class="container">
          <div class="row">
              <div class="col-xl-9 mx-auto"><h2 class="mb-4">Ready to get started? Sign up now!</h2></div>
              <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                  <form>
                      <div class="form-row">
                          <div class="col-12 col-md-9 mb-2 mb-md-0"><input class="form-control form-control-lg" type="email" placeholder="Enter your email..." /></div>
                          <div class="col-12 col-md-3"><button class="btn btn-block btn-lg btn-primary" type="submit">Sign up!</button></div>
                      </div>
                  </form>
              </div>
          </div>
      </div>
  </section>
  <!-- Footer-->
  <footer class="footer bg-light">
      <div class="container">
          <div class="row">
              <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
                  <ul class="list-inline mb-2">
                      <li class="list-inline-item"><a href="#!">About</a></li>
                      <li class="list-inline-item">⋅</li>
                      <li class="list-inline-item"><a href="#!">Contact</a></li>
                      <li class="list-inline-item">⋅</li>
                      <li class="list-inline-item"><a href="#!">Terms of Use</a></li>
                      <li class="list-inline-item">⋅</li>
                      <li class="list-inline-item"><a href="#!">Privacy Policy</a></li>
                  </ul>
                  <p class="text-muted small mb-4 mb-lg-0">© Your Website 2021. All Rights Reserved.</p>
              </div>
              <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
                  <ul class="list-inline mb-0">
                      <li class="list-inline-item mr-3">
                          <a href="#!"><i class="fab fa-facebook fa-2x fa-fw"></i></a>
                      </li>
                      <li class="list-inline-item mr-3">
                          <a href="#!"><i class="fab fa-twitter-square fa-2x fa-fw"></i></a>
                      </li>
                      <li class="list-inline-item">
                          <a href="#!"><i class="fab fa-instagram fa-2x fa-fw"></i></a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </footer>
</body>
</html>

2. Guys please create `img` folder inside laraveproject/public/assets folder.

Download and paste below images inside laraveproject/public/assets/img folder:

bg-showcase-3

testimonials-1

testimonials-2

testimonials-3

bg-masthead

bg-showcase-1

bg-showcase-2


Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.