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?
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 have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I'm stack with a pretty simple question, and I was wondering maybe you can help, cause you always do..
So what I have is a very basic bootstrap layout.. say:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">looong-long-text</div>
<div class="col-md-6">long-text</div>
<div class="col-md-6">another long text</div>
<div class="col-md-6">and another long text</div>
</div>
</div>
Please check the image link to see what i need
Is there any simple way to achieve such results with bootstrap? Tnx.
I have two solutions for you:
First (better in my opinion, less code):
<div class="container">
<div class="row">
<div class="col-md-6">
<div>First</div>
<div>Third</div>
</div>
<div class="col-md-6">
<div>Second</div>
<div>Fourth</div>
</div>
</div>
</div>
Second:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
</div>
</div>
CODEPEN
You could try out the new Bootstrap version 4 card column feature.
You can't do this with bootstrap out of the box, but there are other tools to help you do this. Here is one of them:
http://masonry.desandro.com/
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 having cards which show horizontally. Please see the image to get an idea. When I have a big header, in sm screens the cards inside the columns wrap unevenly.
<div class="col-sm-4" data-ng-repeat="card in cards">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
How to solve this issue?
Option 1
You could use CSS ellipsis like this to append '..' to the heading when it's too long:
.cardHeader {
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
}
Demo: http://www.bootply.com/115420 (uses panel-heading instead)
Option 2
Another option is to use a clearfix div after every 3 'col-sm-4' div..
Demo: http://www.bootply.com/115421
Related
Bootstrap row with columns of different height
do you use the row class? something like this:
<div class ='row'>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
</div>
Another option, which is slightly more HTML heavy but keeps the boxes/cards responsive:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card biggercard">
<div class="cardHeader">Biggest Header</div>
1
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Second Header</div>
2
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Third</div>
3
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Fourth</div>
4
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">5th</div>
5
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">6th</div>
6
</div>
</div>
</div>
</div>
</div>
</div>
Demo FIddle: http://jsfiddle.net/La3H2/