Insert Image Inside A Panel Using Bootstrap
Hello friends, many times we see an image inserted inside a TV box or panel and wonder how is it done. So today we are going to learn how to ‘Insert Image Inside A Panel Using Bootstrap’. So lets start this tutorial.
STEP 1:
Create a index.html file.
[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
Meul Tech – Insert Image Inside A Panel Using Bootstrap
</title>
<!– Bootstrap Core CSS –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– Custom CSS –>
<link href="one-page-wonder.css" rel="stylesheet">
<link href=’http://fonts.googleapis.com/css?family=Montserrat:400,700′ rel=’stylesheet’ type=’text/css’>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20’Montserrat’%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%2F*%20this%20is%20just%20for%20the%20demo%20*%2F%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel-heading%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-touch-callout%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-webkit-user-select%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-khtml-user-select%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-moz-user-select%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20-ms-user-select%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20user-select%3A%20none%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.side-tab%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel.panel-default%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20none%20!important%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom-right-radius%3A%200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-bottom-left-radius%3A%200px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel-heading%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23eee%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel-body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23f5f5f5%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.panel-title%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%24white%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2055.3125em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2031.875em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2013px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%201199px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2011px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A1024px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A767px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%207px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A320px)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-lid%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2045em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2030.625em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%201.875em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20solid%200.1875em%20%23cdced1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23131313%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-camera%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%200.375em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.375em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%201.0625em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20inset%200%20-1px%200%20rgba(255%2C%20255%2C%20255%2C%200.25)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-camera%3Aafter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%200.125em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.125em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20left%3A%200.125em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%200.0625em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23353542%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-screen%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2042.25em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2026.375em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%202.0625em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20background%3A%20%231d1d1d%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-screen%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-base%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.9375em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%20-0.75em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23c6c7ca%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-base%3Aafter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.5em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20bottom%3A%20-0.1875em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23b9babe%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%200%201.25em%201.25em%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro%20.md-base%3Abefore%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%207.6875em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.625em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%23a6a8ad%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%200%200.625em%200.625em%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20.md-macbook-pro.md-glare%20.md-lid%3Aafter%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20right%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%200%201.25em%200%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20-webkit-linear-gradient(37deg%2C%20rgba(255%2C%20255%2C%20255%2C%200)%2050%25%2C%20rgba(247%2C%20248%2C%20240%2C%200.025)%2050%25%2C%20rgba(250%2C%20245%2C%20252%2C%200.08))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20-moz-linear-gradient(37deg%2C%20rgba(255%2C%20255%2C%20255%2C%200)%2050%25%2C%20rgba(247%2C%20248%2C%20240%2C%200.025)%2050%25%2C%20rgba(250%2C%20245%2C%20252%2C%200.08))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20-o-linear-gradient(37deg%2C%20rgba(255%2C%20255%2C%20255%2C%200)%2050%25%2C%20rgba(247%2C%20248%2C%20240%2C%200.025)%2050%25%2C%20rgba(250%2C%20245%2C%20252%2C%200.08))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20linear-gradient(53deg%2C%20rgba(255%2C%20255%2C%20255%2C%200)%2050%25%2C%20rgba(247%2C%20248%2C%20240%2C%200.025)%2050%25%2C%20rgba(250%2C%20245%2C%20252%2C%200.08))%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<!– Navigation –>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<h1 class="logo">
<a title="" href="https://www.mehulprajapati.com" >
<img alt="" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg" style="height: auto; width: auto; display: inline-block; top: 0px;"></a>
</h1></div>
<!– Collect the nav links, forms, and other content for toggling –>
<!– /.navbar-collapse –>
</div>
<!– /.container –>
</nav>
<!– Full Width Image Header –>
<!– Page Content –>
<div class="container">
<!– First Featurette –>
<div class="featurette" id="about">
<!————————code—————start—————->
<div class="container">
<div class="row">
<div class="col-md-4">
<!– begin panel group –>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!– panel 1 –>
<div class="panel panel-default">
<!–wrap panel heading in span to trigger image change as well as collapse –>
<span class="side-tab" data-target="#tab1" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingOne"data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">Rock</h4></div></span>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<!– Tab content goes here –>Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum.Lorem epsum lorem epsum lorem epsum.</div></div></div>
<!– / panel 1 –>
<!– panel 2 –>
<div class="panel panel-default">
<!–wrap panel heading in span to trigger image change as well as collapse –>
<span class="side-tab" data-target="#tab2" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title collapsed">John Cena</h4></div></span>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"><!– Tab content goes here –>Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum.Lorem epsum lorem epsum lorem epsum.</div>
</div>
</div><!– / panel 2 –><!– panel 3 –>
<div class="panel panel-default"><!–wrap panel heading in span to trigger image change as well as collapse –><span class="side-tab" data-target="#tab3" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingThree" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title">Roman</h4></div>
</span><div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"><!– tab content goes here –>
Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum. Lorem epsum lorem epsum lorem epsum.Lorem epsum lorem epsum lorem epsum.</div>
</div>
</div>
</div>
<!– / panel-group –>
</div>
<!– /col-md-4 –>
<div class="col-md-8">
<!– begin macbook pro mockup –>
<div class="md-macbook-pro md-glare">
<div class="md-lid">
<div class="md-camera"></div>
<div class="md-screen">
<!– content goes here –>
<div class="tab-featured-image">
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<img src="img/therock.jpg" alt="tab1" class="img img-responsive">
</div>
<div class="tab-pane " id="tab2">
<img src="img/john-cena.jpg">
</div>
<div class="tab-pane fade" id="tab3">
<img src="img/roman.jpg" alt="tab1" class="img img-responsive">
</div>
</div>
</div>
</div>
<div class="md-base"></div>
</div>
<!– end macbook pro mockup –>
</div>
<!– / .col-md-8 –>
</div>
<!–/ .row –>
</div>
<!– end sidetab container –>
<!—-Code——end———————————–>
</div>
<!– /.container >
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-1">
<a href="https://www.mehulprajapati.com" class="logo">
<img alt="Meul Tech " class="img-responsive" src="https://www.mehulprajapati.comwp-content/uploads/2015/08/Meul Tech -Logo-259×30.jpg"> </a></div>
<div class="col-md-3 col-sm-12 col-xs-12">
©Copyright 2016. All Rights Reserved.
</div>
</div>
</div>
</div>
<!– jQuery –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<!– Bootstrap Core JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</script>
</body>
</html>
[/php]
STEP 2:
For other steps, please download the source code. Because only the bootstrap files and a CSS file is left and the code is big.
Finally our ‘Insert Image Inside A Panel Using Bootstrap’ example is ready to run. Hit your url and check out the output.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Creative Bootstrap Template With Free Source Code
- Free Template For Multi Page Hosting Website In Bootstrap
- Stunning Bootstrap One Page Template Free Project
- Bootstrap Navigation Bar With Animated Icons
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.