हेल्लो दोस्तों, आज हम इस आर्टिकल में लेकर है है Web Designing Responsive 3 Column with Text का HTML Code. Responsive Column with Text का use आप अपने ब्लॉग के मैंन Page या अपने Post के लिए use कर सकते है यह Desktop में अलग तथा Mobile में अलग तरीके से दिखेगा इसी लिए इसका नाम Responsive Column with Text दिए है
Responsive Column with Text Demo
नीचे दिए गए Demo में आप देख सकते है Responsive Effect देखने के लिए अपने ब्राउज़र को Resize करे
Responsive Column with Text CSS Code
नीचे दिए गए CSS Code में आप Padding, Margin तथा Background Text को कस्टमाइज कर सकते है
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #ffc107;
}
.col-sm-4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
color:#000000;
}
Responsive Column with Text HTML Code
नीचे दिए गए HTML Code में आप अपने अनुसार Heading Paragraph को अपने अनुसार लिखे
<div class="jumbotron text-center">
<h1>Responsive Column </h1>
<p>Responsive Column with Center Text!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Example 1</h3>
<p>You can use this given project on the main page of your blog. </p>
<p>Use your word in this column project and make the website professional...</p>
</div>
<div class="col-sm-4">
<h3>Example 2</h3>
<p>You can use this given project on the main page of your blog. </p>
<p>Use your word in this column project and make the website professional...</p>
</div>
<div class="col-sm-4">
<h3>Example 3</h3>
<p>You can use this given project on the main page of your blog. </p>
<p>Use your word in this column project and make the website professional...</p>
</div>
</div>
</div>
अब हमारा Responsive Column with Text Web Designing Project तैयार हो चूका है
Responsive Column with Text Source Code
Responsive Column with Text Web Designing Project का Source Code दिया जा रहा है Source Code के नीचे दिए गए Copy Code वाले बटन पर click करके उपरोक्त सभी code को कॉपी कर सकते है