Span2 Twitter Bootstrap in a Small Div - css

I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.menu{
width:200px;
height: 300px;
background-color:green;
}
.filterEl{
position: relative;
height:40px;
border: solid black 2px;
}
The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?


From your example, I think you want the span2 div to actually be your row-fluid as well:
<div id="menu">
<div class="container">
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
See this jsfiddle for a demo.


Parent of every column should be a row.
So, try below structure.
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Reference

Related

Bootstrap 4 grid not aligning

Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>

The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>

How can block overflow with high:auto in CSS?

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?

Border layout with bootstrap

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?

Bootstrap Image Between Column

What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.

Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.

This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo

Responsive design issue in small screens - Bootstrap

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/

Resources