Bootstrap Snippet Theme Blog using HTML CSS Bootstrap

"Theme Blog"
Bootstrap 4.0.0 Snippet by TuanPhan

4.0.0

1.6K 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Blog Home - Start Bootstrap Template</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">  <link href="css/blog-home.css" rel="stylesheet"> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.10"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#"><h1>Trần bình minh</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">jQuery <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">CSS <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">HTML <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">C++ <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav>  <div class="container"> <div class="row">  <div class="col-md-8"> <h1 class="my-4">Bài viết <small>Mới nhất</small> </h1>  <div class="card mb-4"> <img class="card-img-top" src="http://sv1.upsieutoc.com/2017/08/30/js.jpg" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Cách thức hoạt động của JavaScript: V8 engine và 5 mẹo tối ưu hóa</h2> <p class="card-text">Một JavaScript engine là chương trình hoặc là interpreter (trình thông dịch) thực thi code JavaScript. Một JavaScript engine có thể được thực hiện như một trình thông dịch tiêu chuẩn, hoặc compiler (trình biên dịch) phù hợp để biên dịch JavaScript thành bytecode trong một số hình thức.</p> <a href="#" class="btn btn-primary">Xem tiếp →</a> </div> <div class="card-footer text-muted"> Posted on January 8, 2017 by <a href="#">Admin</a> </div> </div>  <div class="card mb-4"> <img class="card-img-top" src="http://sv1.upsieutoc.com/2017/08/30/AI.jpg" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Microsoft giới thiệu Brainwave – phần cứng tăng tốc xử lý cho AI dùng chip Stratix 10 của Intel</h2> <p class="card-text">Tại hội nghị Hot Chips đang diễn ra tại Cupertino, California, Microsoft đã gây bất ngờ khi ra mắt một nền tảng phần cứng dành riêng cho AI với tên gọi Brainwave.</p> <a href="#" class="btn btn-primary">Xem tiếp →</a> </div> <div class="card-footer text-muted"> Posted on January 8, 2017 by <a href="#">Admin</a> </div> </div>  <div class="card mb-4"> <img class="card-img-top" src="http://sv1.upsieutoc.com/2017/08/30/java.png" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">10 quốc gia nơi lập trình viên Java được trả lương cao nhất </h2> <p class="card-text">Java là một trong những ngôn ngữ lập trình được sử dụng phổ biến nhất hiện nay. Nó cũng khá phổ biến trong một số các công ty công nghệ hàng đầu, họ cung cấp những ưu đãi đặc biệt cho các lập trình viên Java. Hầu hết các ứng dụng Android mà bạn thấy trên Google Play đều phát triển dựa trên ngôn ngữ Java.</p> <a href="#" class="btn btn-primary">Xem tiếp →</a> </div> <div class="card-footer text-muted"> Posted on January 8, 2017 by <a href="#">Admin</a> </div> </div>  <ul class="pagination justify-content-center mb-4"> <li class="page-item"> <a class="page-link" href="#">← Older</a> </li> <li class="page-item disabled"> <a class="page-link" href="#">Newer →</a> </li> </ul> </div> <div class="col-md-4">  <div class="card my-4"> <h5 class="card-header">Tìm kiếm</h5> <div class="card-body"> <div class="input-group"> <input type="text" class="form-control" placeholder="ngôn ngữ lập trình..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Tìm kiếm!</button> </span> </div> </div> </div>  <div class="card my-4"> <h5 class="card-header">Thể loại</h5> <div class="card-body"> <div class="row"> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">Web Design</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">Freebies</a> </li> </ul> </div> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">JavaScript</a> </li> <li> <a href="#">CSS</a> </li> <li> <a href="#">Tutorials</a> </li> </ul> </div> </div> </div> </div>  <div class="card my-4"> <h5 class="card-header">Admin</h5> <div col-lg-3 col-sm-6> <div class="card hovercard"> <div class="cardheader"> </div> <div class="avatar"> <img alt="" src="http://sv1.upsieutoc.com/2017/08/30/images.png" width="100%" height="80%"> </div> <div class="info"> <div class="title"> <br/> <a target="_blank" href="http://scripteden.com/"><h3 align="center">Trần bình minh</h3></a> </div> <div class="desc"><h6>Chúc vụ: sinh viên</h6></div> <div class="desc"><h6>Developer App Mobile</h6></div> <div class="desc"><h6>Blog chia sẻ công nghệ</h6></div> </div> <div class="bottom" align="center"> <a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/webmaniac"> <i class="fa fa-twitter"></i> </a> <a class="btn btn-danger btn-sm" rel="publisher" href="https://plus.google.com/+ahmshahnuralam"> <i class="fa fa-google-plus"></i> </a> <a class="btn btn-primary btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam"> <i class="fa fa-facebook"></i> </a> <a class="btn btn-warning btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam"> <i class="fa fa-behance"></i> </a> </div> </div> </div> </div> <div class="card my-4"> <div class="card"> <div class="card-header"> <h5 class="cards-header">Thẻ tag</h5> </div> <div class="card-block"> <h4 class="card-title">Tag card</h4> <div class="panel-footer"> <a href="#" class="btn btn-warning" title="ban" ><i>Công nghệ</i></a> <a href="#" class="btn btn-primary" title="ban" ><i>SEO Web</i></a> <a href="#" class="btn btn-warning" title="ban" ><i>Mobile</i></a> </div> <br/> <div class="panel-footer"> <a href="#" class="btn btn-primary" title="ban" ><i>Lập trình</i></a> <a href="#" class="btn btn-success" title="ban" ><i>Giao diện</i></a> <a href="#" class="btn btn-warning" title="ban" ><i>HTML5</i></a> </div> <br/> <div class="panel-footer"> <a href="#" class="btn btn-danger" title="ban" ><i>CSS3</i></a> <a href="#" class="btn btn-warning" title="ban" ><i>Javascript</i></a> <a href="#" class="btn btn-danger" title="ban" ><i>Trí tuệ nhân tạo</i></a> </div> <br/> <a href="#" class="btn btn-primary" title="ban" ><i>học code</i></a> <a href="#" class="btn btn-warning" title="ban" ><i>Phím tắt</i></a> <a href="#" class="btn btn-danger" title="ban" ><i>Tư duy logic</i></a> </div> </div></div> <div class="card my-4"> <h5 class="card-header"> Bài xem nhiều nhất </h5> <div class="project"> <figure class="img-responsive"> <img src="http://sv1.upsieutoc.com/2017/08/30/js.jpg" width="100%" height="100%"> <span class="actions"> <span class="text-capitalize">Cách thức hoạt động của JavaScript: V8 engine và 5 mẹo tối ưu hóa</span> </span> </figure> <a href="#" class="btn btn-primary">Xem tiếp →</a> </div> <div class="project"> <figure class="img-responsive"> <img src="http://sv1.upsieutoc.com/2017/08/30/AI.jpg" width="100%" height="100%"> <span class="actions"> <span class="text-capitalize">Microsoft giới thiệu Brainwave</span> </span> </figure> <a href="#" class="btn btn-primary">Xem tiếp →</a> </div> </div> <div class="card my-4"> <h5 class="card-header"> Fan page </h5> <div class="fb-page" data-href="https://www.facebook.com/Devwonwon-1439494016140368/" data-tabs="timeline" data-width="900" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Devwonwon-1439494016140368/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Devwonwon-1439494016140368/">Devwonwon</a></blockquote></div> </div> </div> </div>  </div>    <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Designe:© Phantuan - Framework: bootstrap 4</p> </div>  </footer>  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>

body { padding-top: 54px; } @media (min-width: 992px) { body { padding-top: 56px; } }

Related: See More

Rubik Presentation Page

Rubik Presentation Page

Bootstrap 4 Blog Carousel

Bootstrap 4 Blog Carousel

Blog post layout with sidebar

Blog footer

Questions / Comments:

Posting GuidelinesFormatting