How to create a block using bootstrap theming

newcoder1010 · March 19, 2019

Hello,

I am trying to create a block as per the design I attached here. This is the link I am playing around here but I could not do it. I was wondering if you could help me providing me the complete html using the bootstrap theme, I would really appreciate.

Thanks.

Funce · March 19, 2019

Does this work?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron">
  <div class="container text-center">
    <h1>TITLE</h1>      
    <p>SHORT DESCRIPTION GOES HERE</p>
  </div>
</div>
  
<div class="container-fluid bg-3 text-center">    
<br>
  <div class="row">
    <div class="col-sm-4">
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
      <p>IMAGE DESCRIPTION</p>
    </div>
    <div class="col-sm-4"> 
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
      <p>IMAGE DESCRIPTION</p>
    </div>
    <div class="col-sm-4"> 
      <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
      <p>IMAGE DESCRIPTION</p>
    </div>
  </div>
</div>
</body>
</html>

This is the portfolio theme from the templates, just modified a little.

Edited March 19, 2019 by Funce

Makwana Prahlad · March 17, 2020

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="Your Favicon Image Link" />
<meta name="description" content="Meta Description for your Page.">
<title>Enter Title for Your Page</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* Hide Overflow */
body {
overflow-x: hidden;
}
/* Card Alignment */
.card {
margin: 30px;
text-align: center;
}  
/* Header Jumbotron */
.jumbotron{
color: #990000;
background-color: #fafafa;
margin-bottom: -20px;
background: #fff;
text-align: center;
border-radius: 0;
}
/* Footer Jumbotron */
.jumbotron-fluid {
background: lightgrey;
padding: 50px;
text-align: center;
}
/* Margin for Menu */
.outframe { 
padding: 0 20px;
}
/* Shadow Effect for Button, Collapse & Cards */
.btn-spl {
box-shadow: 0 1px 4px rgba(100, 20, 100, .6);
border-radius: 0px;
}
/* Heading with Divider */
.title {
line-height: 2.5;
text-align: center;
}
.title span {
display: inline-block;
position: relative;  
}
.title span:before,
.title span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray;
top: 0;
width: 75%;
margin-top:35px;
}
.title span:before {
right: 100%;
margin-right: 15px;
}
.title span:after {
left: 100%;
margin-left: 15px;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo">
Bootstrap 4 Theme</a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto ml-auto">
<li class="nav-item outframe">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item outframe">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item dropdown outframe">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br><br>
<!-- Carousel -->
<div id="slidercaption" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slidercaption" data-slide-to="0" class="active"></li>
<li data-target="#slidercaption" data-slide-to="1"></li>
<li data-target="#slidercaption" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 1</h3>
<p>Here is short description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 2</h3>
<p>Here is short description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%">
<div class="carousel-caption d-none d-md-block">
<h3>Here is a caption for slide 3</h3>
<p>Here is short description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Hero Header Jumbotron -->
<div class="jumbotron">
<h1 class="display-3">Bootstrap 4 Template</h1>
<p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p>
<hr class="my-4">
<p>Add your subtitle here to explain more about this page in detail.</p>
<a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a>
</div>
<h3 class="title"><span>Order Products</span></h3>
<!-- Card Deck -->
<div class="card-deck">
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 1</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 2</h4>
<p class="card-text">Here is a shorter description of the card.</p>
<button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card btn-spl">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Product 3</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
<button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<hr class="my-5">
<div class="row">
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<h3 class="title"><span>Read FAQ</span></h3>
<!-- Collapse -->
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header btn-spl" role="tab" id="firstheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
Heading 1
</a>
</h5>
</div>
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading">
<div class="card-block">
Here is the content for the first section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="secondheading">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Heading 2
</a>
</h5>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading">
<div class="card-block">
Here is the content for the second section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Heading 3
</a>
</h5>
</div>
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
<div class="card">
<div class="card-header btn-spl" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3">
Heading 4
</a>
</h5>
</div>
<div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="card-block">
Here is the content for the third section.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form -->
<div class="col-md-6" style="padding:30px 50px;">
<div class="container" style="padding:30px;border:1px solid gray;">
<h3 class="title"><span>Contact Us</span></h3>
<form>
<!-- Text Input -->
<div class="form-group">
<label for="username">Enter Username:</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
</div>
<!-- Single Select -->
<div class="form-group">
<label for="singleselect">Choose Option:</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="textarea">Enter Your Comment:</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-success btn-spl btn-md">Submit</button>
</form>   
</div>
</div>
</div>
<!-- Footer -->
<div class="jumbotron-fluid">
<div class="container">
<h2 style="padding-bottom: 30px">This is a footer section of your page.</h2>
<p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p>
</div>
</div>
<!-- Bootstrap 4 Scripts -->
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

. You can further add Google Analytics and advertisement code on the page as in the demo page.This is full Responsive block demo Template

Funce · March 18, 2020

Please do not reply to old topics.

Sign In

How to create a block using bootstrap theming

Recommended Posts

newcoder1010

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity