"Untitled"
Bootstrap 4.1.1 Snippet by bsf2004883

Post to Facebook Tweet this

<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 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <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> <script type="text/javascript" src="https://kit.fontawesome.com/b99e675b6e.js"></script> <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styless.css"> </script> </head> <body> <div class="container-fluid"> <div class="row"> <!-- Navbar start --> <div class="col-lg-3 col-md-3 col-12" > <nav id="sidebar" class="sidebar " > <div class="sidebar-content " id="sidebar-content" > <div class="sidebar-user ml-3 mb-5 "> <img src="pexels-iryna-stasiukova-212185.jpg" class="img-fluid rounded-circle mb-3 mt-4" alt="Linda Miller" style="width:25%;"> <div class="font-weight-bold">Feb 02, 2020</div> <span class="text-muted">08:43 am</span> </div> <a href="#home" class="mb-4"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#services" class="mb-4"><i class="fa fa-fw fa-wrench"></i> International</a> <a href="#clients" class="mb-4"><i class="fa fa-briefcase" aria-hidden="true"></i> Buisness</a> <a href="#contact" class="mb-4"><i class="fab fa-youtube"></i> Entertainment</a> <a href="#contact" class="mb-4"><i class="fa fa-gamepad" aria-hidden="true"></i> Sports</a> <a href="#contact" class="mb-4"><i class="fa fa-medkit" aria-hidden="true"></i> Health</a> </div> <div class="div1 ml-2 mt-5 mb-5" > <div class="container-fluid"> <h5 class="mt-2">News in a box</h5> <p style="letter-spacing: -1px;">Box is all of you need</p> <button type="button" class="btn btn-primary active">Upgrade</button> </div> </div> </nav> </div> <!-- navbar end --> <!-- Good morning section start --> <div class="col-lg-9 col-md-9 col-12"> <div class="row"> <div class="col-lg-8 col-md-8 col-12 " > <h5 class="pt-5 mr-5" id="morning"><i class="far fa-sun text-warning mr-3"></i> Good Morning,<span style="font-weight: 10;"class="text-muted">Rose</span></h5> </div> <div class="col-lg-4 col-md-4 col-12"> <form class="form-inline my-2 my-lg-0 pt-5 " id="form1" > <input class="form-control " type="search" placeholder="Search for article" aria-label="Search"> <button class="btn btn-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button> </form> </div> </div> <!-- Good morning section end --> <!-- card section start --> <div class="row mt-5"> <div class="col-lg-8 col-md-8 col-12"> <!-- horizantol card start--> <div class="card mb-2" id="H-card"style="border-radius: 20px; width: 535px;height: 210px; box-shadow: 0px 1px 5px 0px;"> <div class="row "> <div class="col-md-6 col-md-6 col-12"> <img src="artem.jpg" alt="artem" style="width: 250px;height: 200px; margin:3px; border-radius: 20px;"> </div> <div class="col-md-6 col-md-6 col-12"> <div class="card-body"> <h5 class="card-title text-muted" style="font-weight: 10;">Architecture</h5> <p class="card-text " style="font-weight: bold;">Ground Breaking Building is a classic Example of English architecture</p> <div class="media d-flex "><img src="pexels-iryna-stasiukova-212185.jpg" width="50" height="50" class="mr-3 rounded-circle "> <div class="media-body"> <h6 style="font-size: 20px;">Tony Roseville</h6> <p class="font-weight-normal text-muted">july 13,2019</p> </div> </div> </div> </div> </div> </div> <!-- horizontal card end --> </div> <!-- Square card start --> <div class="col-lg-4 col-md-4 col-sm-12"> <div class="card " style="width:250px; height: 215px; border-radius: 20px;box-shadow: 0px 1px 5px 0px;"> <div class="card-body"> <h4 class="card-title text-center bg-light ;"><i class="far fa-file-alt"></i>Tuesday capsule<br><span style="font-weight:10; font-size:20px;" class="text-muted">Get update on the fly</span><br><span style="font-weight:10;color:blue; font-size:20px;">Brife me</span> </h4> <p class="card-text">Amsterdam,Netherland</p> <h6><i class="fas fa-cloud text-primary mr-2"></i> 28 c</h6> <p class="text-muted"style="margin-left:20px;">cloudy day,chances of rain</p> </div> </div> </div> <!-- Square card end --> </div> <!-- card section end --> <!-- small boxes start --> <div class="row mt-5" > <div class="col-md-4 col-lg-4 col-sm-12"> <!-- box 1 --> <div class="card" style="height:110px; border-radius: 20px; box-shadow: 0px 1px 5px 0px; "> <div class="card-body"> <h5 class="card-title " style="font-size:19px;">Subscribe to News letter</h5> <form class="d-flex my-2 my-lg-0 " > <input class="form-control " type="search" placeholder="Enter email" aria-label="Search"> <button class="btn btn-primary my-2 my-sm-0" type="submit"><i class="far fa-envelope"></i></button> </form> </div> </div> <!-- box 1 end --> </div> <!-- box 2 --> <div class="col-lg-4 col-md-4 col-12"> <div class="card mb-3" style=" border-radius: 20px; height:110px; box-shadow: 0px 1px 5px 0px;"> <div class="row g-0"> <div class="col-md-4"> <img src="pexels-iryna-stasiukova-212185.jpg" class="img-fluid" style=" width: 100px; height:90px; margin:5px; border-radius: 10px; " alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <p class="card-title text-muted"><i class="far fa-eye"></i>12,096</p> <p class="card-text" style="font-weight:bold;">The Benefits of Cauliflower</p> </div> </div> </div> </div> </div> <!-- box 2 end --> <!-- box 3 --> <div class="col-lg-4 col-md-4 col-12" > <div class="card mb-3" style=" border-radius: 20px; height:110px; box-shadow: 0px 1px 5px 0px;"> <div class="row "> <div class="col-md-4 col-lg-4 "> <img src="pexels-iryna-stasiukova-212185.jpg" class="img-fluid" style=" width: 100px; height:90px; margin:5px; border-radius: 10px; " alt="..."> </div> <div class="col-md-8 col-lg-8 col-12"> <div class="card-body"> <p class="card-title text-muted"><i class="far fa-eye"></i>44,880</p> <p class="card-text" style="font-weight:bold;">Let us plant more trees year </p> </div> </div> </div> </div> <!-- box 3 end --> </div> </div> <!-- small boxes end --> <!-- horizontal picture section--> <div class="row mt-5 mr-2" > <!-- horizontal picture --> <div class="col-lg-10 col-md-10 col-12"> <div class="card bg-white text-white" style="width: 680px; border-radius: 20px; box-shadow: 0px 1px 5px 0px;"> <img src="pexels-cottonbro-4712009.jpg" class="card-img img-fluid" style="height: 180px;width: 669px;border-radius: 20px; margin:5px; " alt="..."> <div class="card-img-overlay"> <button type="button" class="btn btn-secondary">Featured</button> <h5 class="card-title text-dark">Natural mood regulation low or even<br> absent in people with depression</h5> <p class="card-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam vehicula pharetra ex, ut ornare urna luctus eu. </p> </div> </div> </div> <!-- H picture end --> <!-- small box start --> <div class="col-lg-2 col-md-2 col-12"> <div class="card" style="width:140px; height:197px;border-radius: 20px; box-shadow: 0px 1px 5px 0px;"> <div class="card-body"> <h4 class="card- ">Aurther</h4> <p class="card-text text-muted ">of the month</p> </div> <img class="card-img-bottom " src="pexels-iryna-stasiukova-212185.jpg" alt="Card image" style="width:80px;height:80px; margin-left:20px;border-radius: 10px; margin-top: 10px; "> <p class="ml-3 text-primary"> Know more</p> </div> </div> <!-- small box end --> </div> </div> </div> </div> </body> </html>
.sidebar { width: 250px; background: transparent; border-right: 0; } .sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block;} .div1 { width: 210px; height: 140px; border: 1px solid blue; border-radius:15px; background-color:blue; color:white; }

Questions / Comments: