Although I am not a web designer by trade, I have a background in statistics and am currently working on building a website. I have sketched out the layout structure I desire using basic html and simple css to kick things off. However, upon further exploration, I've come across frameworks like bootstrap that offer a more polished look and feel, prompting me to consider transitioning in that direction. My main query now is how can I recreate this existing structure using bootstrap?
The HTML File:
<html>
<link rel="stylesheet" type="text/css" href="layout.css" media="screen" />
<div class="container">
<div class="user_stats">
User Statistics
</div>
<div class="hunt">
suggestions
</div>
<div class="personal">
personal
</div>
</div>
</html>
.container {
width:960px;
margin:0 auto;
}
.user_stats, .personal, .hunt {
background-color:#aaa;
margin:0 0 5px 5px;
}
The CSS File:
.user_stats, .personal {
width:400px;
float:left;
}
.user_stats {
height:200px;
}
.personal {
height:300px;
}
.hunt {
width:550px;
height:505px;
float:right;
}
I also intend to incorporate placeholders for images in both the 'personal' and 'suggestions' sections (referenced as such in the CSS), with the boxes having scroll bars.
Below is a preview of how it appears based on my current code: