Jump to content
Sign in to follow this  
newcoder1010

How to create a block using bootstrap theming

Recommended Posts

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. 

Share this post


Link to post
Share on other sites

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 by Funce

Share this post


Link to post
Share on other sites
<!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 

Share this post


Link to post
Share on other sites

Please do not reply to old topics.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...