Designing profile boxes with bootstrap's grid system
Question
Hi I'm trying to modify this bootstrap snippet so that it looks like my image below, where B, C, D, E are all the same size with A a little bit larger. I'm trying to use this for my profile section on my website (which explains the inner boxes for the images).
I'm having a lot of troubles with the grid system though. Either the text misaligns when I insert an image or the boxes won't come side by side.
Here's my jsfiddle:
https://jsfiddle.net/nv7rsgpg/8/
Can anyone help me out!? Or possibly direct me to another framework that could be easier than doing it by hand?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body{padding-top:30px;}
.glyphicon { margin-bottom: 10px;margin-right: 10px;}
small {
display: block;
line-height: 1.428571429;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Person</h4>
<small><cite title="San Francisco, USA">USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email@example.com
<br />
<i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Twitter</a></li>
<li><a href="https://plus.google.com/+Jquery2dotnet/posts">Google +</a></li>
<li><a href="https://www.facebook.com/jquery2dotnet">Facebook</a></li>
<li class="divider"></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email@example.com
<br />
<i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Twitter</a></li>
<li><a href="https://plus.google.com/+Jquery2dotnet/posts">Google +</a></li>
<li><a href="https://www.facebook.com/jquery2dotnet">Facebook</a></li>
<li class="divider"></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
1 answers
solution1
0 2015-06-25 06:23:35
Hi there , I have set up a Fiddle with a grid layout as per your picture.
See if you can take this code here and use it as a good starting point.
You will need to view this in the full view if using the snippet view below or view the fiddle.
It will stack in the small screen size.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { padding-top: 50px; background-color: darkcyan; } .block { height: 300px; margin-top: 2%; } .inner-block { height: 280px; margin-top: 10px; } .bg-orange { background-color: orangered; } .space{ margin-top: 2%; margin-bottom: 2%; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12"><br><br></div> <div class="container col-lg-12"> <div class="col-xs-12 col-sm-7 bg-orange block"> <div class="row-fluid col-xs-4 col-sm-3 bg-primary inner-block"> </div> </div> <div class="col-xs-12 col-sm-4 col-sm-offset-1 bg-orange block"> <div class="row-fluid col-xs-4 col-sm-3 bg-primary inner-block"> </div> </div> <div class="container col-lg-12 space"></div> <div class="col-xs-12 col-sm-3 bg-orange block"> <div class="row-fluid col-xs-4 col-sm-3 bg-primary inner-block"> </div> </div> <div class="col-xs-12 col-sm-4 col-sm-offset-1 bg-orange block"> <div class="row-fluid col-xs-4 col-sm-3 bg-primary inner-block"> </div> </div> <div class="col-xs-12 col-sm-3 col-sm-offset-1 bg-orange block"> <div class="row-fluid col-xs-4 col-sm-3 bg-primary inner-block"> </div> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Member's profile grid
grid system not working | bootstrap
forEach usage with bootstrap grid system
Bootstrap Grid System (rows clarification)
Bootstrap 3.0 : Grid System Implementation
Why is Twitter Bootstrap Grid System with 12 columns instead of 10 (let's say 100%)?
How to embed sigma.js graph container div within bootstrap's responsive grid system
Bootstrap grid system responisve utility in resizable divs
how to use tables with bootstrap grid-system
To know the accurate key breakpoint in bootstrap grid system
Related Tags