Hi
Could someone please help me with this, I am trying to emulate the attached. I am using Bootstrap3 and would like the ability to click on one of the news blocks on the left and it then shows the content to the right. I have looked for examples but none of them I have found contain an image an text that is clickable to show the text opposite.
Hope that makes sense, and would really appreciate any help on this.
Thanks
Hi,
Bootstrap3 has a built in tab function that will do what you want. You just have to style it to match your desired layout.
Instead of the tabs being at the top you can style them in the left column. Wrap your image and text in an anchor that has the fragment identifier pointing to the id of the element you need to show and it will show it.
The rest is just basic styling to match your design.
Hi Paul
So I would have to place my image in the <li>?
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">IMAGE AND TEXT HERE</a></li>
Thanks
Here’s a rough demo I knocked up in 10 mins:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.my-tab-container {
display:table;
}
.my-tabs, .tab-content {
display:table-cell;
width:50%;
vertical-align:top;
padding:10px;
border:none;
}
.my-tabs > li {
display:block;
float:none;
border:none;
border-bottom:1px solid #fff;
color:#fff;
background:#666;
clear:both;
overflow:hidden;
border-radius:0;
margin:0;
}
.tab-text {
padding:10px;
overflow:hidden;
}
.img-holder {
float:left;
}
.my-tabs li a, .my-tabs li a:visited {
color:#fff;
overflow:hidden;
border:none;
margin:0;
border-radius:0;
padding:0;
}
.my-tabs li.active, .my-tabs li.active a, .my-tabs li.active a:visited, .my-tabs li a:hover, .my-tabs li.active a:hover {
background:#999;
color:#fff;
border:none;
border-radius:0;
margin:0;
}
.my-tabs li.active {
border-bottom:1px solid #fff;
}
.my-tabs li.active a:hover {
margin:0
}
@media screen and (max-width:992px) {
.img-holder {
float:none;
}
.img-holder img {
width:100%;
height:auto
}
}
</style>
</head>
<body>
<div role="tabpanel">
<div class="container my-tab-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs my-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">
<div class="img-holder"><img src="http://www.placehold.it/250x200"></div>
<div class="tab-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus ni. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper.</p>
</div>
</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
<div class="img-holder"><img src="http://www.placehold.it/250x200"></div>
<div class="tab-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus ni. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper.</p>
</div>
</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
<div class="img-holder"><img src="http://www.placehold.it/250x200"></div>
<div class="tab-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus ni. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper.</p>
</div>
</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
<div class="img-holder"><img src="http://www.placehold.it/250x200"></div>
<div class="tab-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus ni. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper.</p>
</div>
</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>This is Tab1 </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus nisi, at malesuada ligula. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper. Pellentesque egestas pellentesque elit at mollis. Proin malesuada elit felis. Sed ornare nibh id ligula ullamcorper iaculis et vel lacus. Nulla nec mi non nulla vehicula blandit. Duis scelerisque ultrices erat non sagittis. Praesent auctor sagittis tincidunt. Cras suscipit vestibulum risus, vitae vehicula neque.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>This is Tab 2 </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae tempus nisi, at malesuada ligula. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper. Pellentesque egestas pellentesque elit at mollis. Proin malesuada elit felis. Sed ornare nibh id ligula ullamcorper iaculis et vel lacus. Nulla nec mi non nulla</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>This is Tab 3 </h2>
<p>Praesent vitae tempus nisi, at malesuada ligula. Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper. Pellentesque egestas pellentesque elit at mollis. Proin malesuada elit felis. Sed ornare nibh id ligula ullamcorper iaculis et vel lacus. Nulla nec mi non nulla vehicula blandit. Duis scelerisque ultrices erat non sagittis. Praesent auctor sagittis tincidunt. Cras suscipit vestibulum risus, vitae vehicula neque.</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>This is Tab 4 </h2>
<p>Nunc varius sapien magna, ut tempus augue varius nec. Donec vestibulum imperdiet erat sit amet ullamcorper. Pellentesque egestas pellentesque elit at mollis. Proin malesuada elit felis. Sed ornare nibh id ligula ullamcorper iaculis et vel lacus. Nulla nec mi non nulla vehicula blandit. Duis scelerisque ultrices erat non sagittis. Praesent auctor sagittis tincidunt. Cras suscipit vestibulum risus, vitae vehicula neque.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I think that should explain it but shout if you are stuck.
WOW Paul!
That is great, If I get stuck I will let you know, but I think I can do the rest.
Thanks again!
Hi Paul
I was wondering if you could assist me, I am sorry but I am having trouble adding the tabbed content into the HTML I have already set up (making it responsive) would you mind helping me if I sent you a link through PM?
Many Thanks for all your help.
Could you post it here so others can help you? 
Ok send me the link and I’ll see what I can do. (Or as Ryan said post the relevant code and we’ll try to help here.)
Hi
Link has been sent.
Thanks again.
Hi Ryan
I have managed to sort out the tabs with the great help from Paul, my last problem is a potentially a tricky one. The layout of the page I have been given is a typical ‘Designers’ page! - Please see screenshot. The site I am developing is using Bootstrap 3, and to be honest I have no idea as to where I should start trying to emulate the design. Would you mind taking a look, this is the last page I need to do for my deadline today!
Is it even possible?
Many Thanks for you help, really appreciate it
This is just pure theoretical but this is how I would approach this. I’m free-talking right now so this may not be in order.
The blue background can just be a gradient with repeat-x on it on a parent.
Each one of those items (Desktop through Hosted Exchange) can be a <div> that’s stacked one on top of each other. The divs will each need the main image associated with it placed on the left/right side depending on the item.
Now we just have the white clouds, faded clouds, and the squiggly lines.
For the faded cloud that’s behind infrastructure, it depends on how crucial it is that it’s behind infrastructure. I’d probably make the infrastrure div have position:relative, and then put that cloud in an empty element and position:absolute it with a negative top: and negative right: value to place it just outside of the parent.
As for the little white cloud to the LEFT of infrastructure, I’d just place that as a background image on infrastructure
For the white cloud to the right of software, again use a background image.
Disaster recovery faded cloud can be the same thing.
Hosted exchange white cloud can be the same thing.
The squiggly lines are the complicated part because users can resizae the text so it’s difficult. It makes having a fixed height image nearly impossible. However this is how I would approach it (please realize this design is difficult and I’m not sure if it’s worth it but I assume it’s not your call).
Each desktop/infrastructure/software/recovery/communications/exchange div needs to have a slice of that squiggly line. Cut it off where each div ends/begins. Once they are all sliced up, place that in an empty element and give that empty element a background image of the squiggly line. Make that element position:absolute and make sure it is wide enough to cover everything (and tall). I predict you might run into some z-index problems when it comes to it overlapping, however let’s just start there. Good luck. Give the designer hell.
Hi Ryan
Give the designer hell 
This all looks far to complicated for me I am afraid, I will try and attempt it, but I don’t hold much joy!
Thanks for the reply and taking the time, I really appreciate it.
Many Thanks
Do what I said, give it a try, and come back if you have issues. Or just stand your ground and declare it impossible 
. The designer thinks the web is a piece of paper and that we can do it exactly as he draws it.
It’s not TOO complicated, but just too complicated for my taste. I probably explained it poorly. Either way, good luck.
Hope you managed to get it sorted with Ryans help (I’ve been away all day so could not help).
As Ryan said the squiggly lines are the most awkward apsect of that design especially if it needs fit into a fluid page and if you are tight on time then leaving them out would leave you with an easier design of basically just rows with elements left and right which should be pretty straightforward (even in bootstrap).
If your client must have the squiggly lines then there is a possibility that you could create the squiggly line separate from any other images and make it appear only at the full width version. As the screen is made smaller and text overlaps then use media queries to remove the squiggly line.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
