Bootstrap portfolio snipp example v07

Bootstrap portfolio snipp example v07

bootstrap portfolio snipp

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<title>Bootstrap portfolio snipp</title>
<style>
.card {
    border: 0;
}
</style>
</head>
<body>

<div class="container py-5">
        <div class="row align-items-center mb-5">
          <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7">
            <h2 class="display-5 mb-3">Latest Projects</h2>
            <p class="lead mb-0">Check out some of my latest projects with creative ideas.</p>
          </div>
          <!--/column -->
          <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
            <a href="#" class="btn btn-primary rounded-pill mb-0 px-4">See All Projects</a>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
       <div class="row gx-md-5">
          <div class="col-lg-6">
            <div class="card alert-danger mb-5">    
              <div class="card-body p-5">
                <div class="small text-uppercase mb-3 fw-bold text-muted">Web Design</div>
                <h3 class="h1 mb-3">Our Best Theme</h3>
                <p class="mb-4">Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
                <a href="#" class="link-danger text-decoration-none fw-bold text-uppercase">See Project &rarr;</a>
              </div>
              <!--/.card-body -->
              <img class="img-fluid px-5" src="https://bootstraplily.com/wp-content/uploads/2021/11/f1.png"  alt="">
            </div>
            <!--/.card -->
          </div>
          <!-- /column -->
          <div class="col-lg-6">
            <div class="card alert-success mb-5">
              <div class="card-body p-5">
                <div class="small text-uppercase mb-3 fw-bold text-muted">Mobile Design</div>
                <h3 class="h1 mb-3">Storage App</h3>
                <p class="mb-4">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>
                <a href="#" class="link-success text-decoration-none fw-bold text-uppercase">See Project &rarr;</a>
              </div>
              <!--/.card-body -->
              <img class="img-fluid px-5" src="https://bootstraplily.com/wp-content/uploads/2021/11/f2.png"  alt="">
            </div>
            <!--/.card -->
          </div>
          <!-- /column -->
        </div>
 
      </div>

</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top