Solved

Twitter Bootstrap: How To Make A Div Just Like This Image?

Posted on 2013-06-18
1
547 Views
Last Modified: 2013-06-18
How do I make a div with Twitter Bootstrap just like this image?

Twitter Bootstrap Tile
0
Comment
Question by:GenericCog
1 Comment
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39257124
Your just going to add the box inside one of your div.span's and give it it's own class as you need to.   If you want to keep with the same dimensions, then use div.spans for the size such that if the box is span6, the inside div's need to each be span3.

Bootstrap grid http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Sample http://jsbin.com/oxopag/1/edit
<!DOCTYPE html>
<html>
<head>
<style>
  .box
 {
  width:300px;
  height:300px;
   background-color:green;
    padding:5px;
  }
.innerbox
  {
   width:140px;
   float:left;}
  </style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="box">
    <div>icons here</div>
    <div class="innerbox">Left</div>
    <div class="innerbox">right</div>
 </div>
   
</body>
</html>

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question