I'm having trouble working with dynamic content which need to get span4 classes. Because a row can be max 12 columns so next 'article' need to jump to the next row.
Please check out this preview what I mean: http://www.dreamix-studio.com/bootstrap/bootstrap_q_2.jpg
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row-fluid">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>
Does anyone know how I can solve this problem?
try This
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>
Related
What is better way to write this type of code in BEM convention?
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-title">Reviews block title</div>
<div class="advantages-reviews-progress">
<div class="advantages-reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>
<div class="advantages">
<section class="advantages__container">
<h2 class="advantages__title">Title</h2>
<div class="advantages-reviews">
<article class="advantages-reviews__block">
<h3 class="advantage-reviews__title">Reviews block title</h3>
<div class="advantages-reviewsProgress">
<h4 class="advantages-reviewsProgress__title">Progress title</h4>
</div>
</article>
</div>
</section>
</div>
In my opinion the best BEM is really extensive, because it's how you make it descriptive. I've would probably just change some minor things:
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-block__title">Reviews block title</div>
<div class="advantages__reviews-progress">
<div class="advantages__reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>
I made my site layout by using layzilla like this.
<div class="content">
<div class="top_block header">
<div class="content">
</div>
</div>
<div class="background right-sidebar">
</div>
<div class="right_block right-sidebar">
<div class="content">
</div>
</div>
<div class="background middle-sidebar">
</div>
<div class="right_block middle-sidebar">
<div class="content">
<div class="top_block middle-sidebar-up">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background left-sidebar">
</div>
<div class="right_block left-sidebar">
<div class="content">
<div class="bottom_block left-sidebar-down">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background container">
</div>
<div class="center_block container">
<div class="content">
</div>
</div>
</div>
It works well except sidebar is too long.
And I use this with AngularJS and uiRouter like this.
It doesn't work when sidebar is too long, the layout is broken.
How about using the css max-height:100vh;
This sets the maximum height to 100% of the viewport heigth.
Like this:
<div class="background left-sidebar" style="max-height:100vh">
If that would be too much, you could use 99vh instead.
Also, have you thought about using Bootstrap to lay out your page?
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?
See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?
I am upgrading to Bootstrap v3 and have encountered an issue with the thumbnails.
Here is my code:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
And here is what it produces:
As you can see, the left hand thumbnails are not inline with the content.
Bootstrap uses a 12-column grid. 3 * 6 > 12. If you want the columns to run next to each other, you'll need to use col-sm-4 (4 * 3 = 12):
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
Alternatively, if you want each thumbnail to occupy 6 columns, place them into two rows:
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>
You are using the row class incorrectly. A row can contain a maximum of 12 columns. You are adding 3*6=18 columns to the same row.
Add another row.
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
<div class="row">
</div>
<div class="col-sm-6">
<div class="thumbnail">
<!-- content -->
</div>
</div>
</div>