I have an image, I have to convert image into bootstrap, can any one help me out to create this layout in bootstrap with responsive
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3">
</div>
</div>
</div>
Yep that is how you do it! 
Thanks for your response, here I made this layout Demo UI
(1) Did you write the Demo page yourself or is it copies from elsewhere?
(2a) What problem are you having?
(2b) Why are you unable to create the page using bootstrap?
(3) Have you read the bootstrap documentation thoroughly?
(4) Do you understand how to write HTML and CSS?
, if not, I recommend that you first take a complete formal class in HTML and CSS or you will not be able to develop a bootstrap page (in spite of the appeal of a “no code” web site).
Again, we are glad to help anyone who is having a problem with their code; however we do not take do-it-for-me orders. There are plenty of consultants and contractors for whom writing code is their livelihood.
@ronpat I have written code by myself,
OK, that was the first question. In addition, it looks like you have experience writing HTML and CSS.
What about question #3? Have you read the bootstrap documentation thoroughly? https://getbootstrap.com/docs/3.3/getting-started/
If not, please do so right away. Consider it required reading!!!
And question #2, What problem are you having? Are you having a problem choosing the right bootstrap code, OR do you not know how to write responsive code? ie. create a responsive page?
I do not use bootstrap. It doesn’t appeal to me. However, a large corporation, might use a framework such as bootstrap to help standardize the code between teams of coders.
If you have read the bootstrap documentation and can explain the problem that you are having, an experienced bootstrapper will be glad to help you.
If you are unable to respond to more than one question at a time. This will take a little longer.
It’s not a good idea to hard code the height of your containers with a fixed pixel height (you used height:750px) as that will break when more content is added or a user zooms their text only. Use a min-height instead as that will allow the element to grow but obviously all columns won’t grow together but is better than overflowing as your example would do.
You would be better off using bootstrap4 (if you must use bootstrap at all) as that uses flexbox and you get equal heights into the bargain without using heights at all.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
background:#252525
}
.my-wrapper {
padding: 52px 15px;
}
.panel {
display:flex;
flex-direction:column;
padding:15px;
flex:1 0 auto;
margin:0 0 15px;
}
.col-rnd {
border-radius:8px;
background:#fff;
}
.my-wrapper .row > div {
display:flex;
flex-direction:column;
flex: 1 0 auto;
}
</style>
</head>
<body>
<div class="container my-wrapper">
<div class="row">
<div class="col-md-2">
<div class="panel col-rnd">
<h2>Col1</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
<div class="col-md-7">
<div class="panel col-rnd">
<h2>Heading Col2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
<div class="col-md-3">
<div class="panel col-rnd">
<h2>Col3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</div>
</div>
</div>
<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>
2 Likes
The getting-started URL for bootstrap 4 is:
One more hint. Be sure to validate your code as you write it. Not after the fact.
validators
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.