I have a bootstrap div with "row" class, and 2 divs inside acting as columns, A and B.
A contains a span with an icon. B contains a panel which height is variable, even after it loads, the user can add things to it and its height can still grow or become smaller.
I need to vertically center my span, taking the panel's height as reference.
here's my code:
<div class="row">
<div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-9">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
The first part is how it is displayed now, and the second part is how I want it to be displayed. As you can see, the "content" is editable inline, so if the panel grows, the span needs to adjust as well.
thank you very much!
EDIT 1
I must add that I am using IE.
I tried the first suggestion and this is the result:
I ended up using this:
<div class="row">
<div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
<div class="col-lg-10 v-align">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
where:
.v-align {
float: none;
display: inline-block;
vertical-align: middle;
}
Please note, that both columns added, equals 11, instead of 12. There was the key! I don't know why, but if I left it 1 and 11 (resulting in 12 in total) it was displayed as mi edit image.
Thank you!
Yes, You can do it, But you have to remove some bootstrap class and add two of your own class and you can set it easily. Here is the code
.content{
clear:both;
display:block;
}
.a{
display:inlin-block;
vertical-align:middle;
width:20%;
}
.b{
display:inlin-block;
vertical-align:middle;
width:80%;
}
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="a">
<span class="icon-clipboard icon-agenda-item"></span>
</div>
<div class="b">
<div class="panel panel-default deletable-panel">
<div class="panel-heading">
heading content
</div>
<div class="panel-body">
body content
</div>
</div>
</div>
</div>
</div>
</div>
I hope This will help you
Regards,
Sarbasish
Related
I am trying to center a nested div in bootstrap that's also inside of a wrapper.
Basically it's sticking to the left of my wrapper instead of relatively centering itself.
HTML:
<div class="wrapper center-block">
<P>
The panels below need to be centered so they dont stay left.
They aren't supposed to line up with this paragraph, but be offset so that it looks "fluid"<br />
i.e. stop here<br />
v
</P>
<div class="row">
<div class="col-lg-8 center-block">
<!-- WHY WONT THIS NESTED DIV CENTER!?-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Test panel </strong></h3>
</div>
<div class="panel-body">
test
</div>
</div>
</div>
</div>
<div class="panel-footer col-sm-10 center-block">
<p><small>test footer</small>
</p>
</div>
</div>
<!-- /container -->
CSS:
.wrapper{
max-width:1200px;
float: none;
margin: 0 auto;
}
I was thinking about making another wrapper but this just seems excessive. Is there another way?
With Css, you can use span to put text and it will shrink it. Then you can center it with margin-left:auto; margin-right:auto; Or the div (needs a width) and make the same. If it's the text, then text-align:center;
Hope that helps!
As per Manuel's suggestion I ended up doing this:
Changed:
<div class="col-lg-8 center-block">
To:
<div class="wrapper2 center-block">
Added CSS:
.wrapper2{
max-width:600px;
float: none;
margin: 0 auto;
}
Alternatively:
<div class="center-block" style="max-width:600px;">
Works just the same.
I need to span a col-md-6 div over 2 rows dynamically, i.e. only if a certain angular var is true.
If this var is false this div wont span over 2 rows.
All the questions I found about this topic didn't addressed the dynamic aspect.
Here are the two options, the div marked with X needs to change dynamically.
Option 1 when var is true
Option 2 when var is false
The html I have right now is this:
<div class="container">
<div class="col-md-7 col-lg-7">
<div class="row">
<p>text</p>
</div>
<div class="row">
<p>text </p>
</div>
</div>
<div class="col-md-5 col-lg-5">
<div class="row">
<div ng-class="show ? ['col-lg-6','col-md-6'] : ['col-lg-12','col-md-12']">
<p>text</p>
</div>
<div ng-if="show" class="col-md-6 col-lg-6">
<p>text</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6">
<p> text</p>
</div>
<div class="col-md-6 col-lg-6">
<p> text</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6">
<p>text</p>
</div>
<div ng-if="show">
<p>text</p>
</div>
</div>
</div>
</div>
You can use bootstrap to dynamically adjust the width of any div by using .container-fluid or .row-fluid classes. It will automatically take the width of the container whenever the viewport or contents within it's parent change. But to dynamically adjust the height bootstrap won't help, you will have to write your own custom css.
The approach i have taken is to use flexbox css layout model. You can use this link to learn more about it.
Set the display property of the parent div to display:flex and flex-direction:column. This will display the child elements vertically. Now give flex property to each of the child divs in the ratio that you would like them to be displayed. For example i have used flex:1 to both childs. This will display them with equal heights.
Now apply the ng-if directive . When the bottom div gets removed from the DOM, the top div automatically fills up the parent container.
html:
<div ng-controller="MyCtrl">
<label>Show Y</label> <input type="checkbox" ng-model="checked" ng-init="checked=true">
<div class="container">
<div class="row-fluid">
<div class="col-xs-6">Hello</div>
<div class="col-xs-6 wrap">
<div class="top">X</div>
<div class="bottom" ng-if="checked">Y</div>
</div>
</div>
</div>
css:
.wrap{
background-color:#e3e;
height:40px;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.top{
background-color:#ccc;
flex:1;
}
.bottom{
background-color:#afc;
flex:1;
}
Here is a working fiddle.
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
Using bootstrap, how can horizontally align components within a panel-heading? In order to have: title : aligned to left, btn1 : centered, btn2 : aligned to the right.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">title</h3>
<button class="btn">btn1</button>
<button class="btn">btn2</button>
</div>
<div class="panel-body">
text
</div>
</div>
</div>
I have tried to create a bootstrap class "row" and columns, but the row goes outside the panel-heading since the panel is inside another col-md-6:
A right way to go with .row and .col is like this
<div class="panel panel-default container-fluid">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
</div>
http://jsfiddle.net/j7u53eav/3
Using Ch.Idea's answer as a jumping-off point, you can add a row class to your panel-heading. However, you do not need to make the panel a container-fluid.
Since the Bootstrap row class adds negative margins, you just need to remove them. Assuming every time a row is added to a panel-heading you would want this behaviour, it's as simple as adding some CSS:
.panel-heading.row {
margin: 0
}
Since columns already have padding, you can take it further by removing the left and right from the row as well:
.panel-heading.row {
margin: 0;
padding-left: 0;
padding-right: 0;
}
And for the sake of thoroughness, a modified copy of Ch.Idea's work:
<div class="panel panel-default">
<div class="panel-heading row">
<div class="col-xs-4"><h3 class="panel-title">title</h3></div>
<div class="col-xs-4 text-center"><button class="btn">btn1</button></div>
<div class="col-xs-4"><button class="btn pull-right">btn2</button></div>
</div>
<div class="panel-body">
text
</div>
<table class="table">
<!-- insert rest of table here -->
</table>
</div>
And a modified jsfiddle showing full-width tables:
http://jsfiddle.net/my7axd1b/3/
I'm trying to have 4 cols inside a row with equal margins but i did not get the desired look
here is my html code
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3">2500</div>
<div class="col-sm-3">1300</div>
<div class="col-sm-3">1000</div>
<div class="col-sm-3">1000</div>
</div>
</div>
css code
.summary_boxes div
{
background-color:#eee;
border: 1px solid #DDDDDD;
border-radius:3px;
}
and this is the result
The issue is that Bootstrap uses padding for columns and columns themselves shouldn't have additional styles applied directly to them.
What you should do is make child elements of the columns and give those the style you want, then you will have the "margin" you are looking for.
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3"><span>2500</span></div>
<div class="col-sm-3"><span>1300</span></div>
<div class="col-sm-3"><span>1000</span></div>
<div class="col-sm-3"><span>1000</span></div>
</div>
</div>
</div>
With the style:
.col-sm-3 > span {
background: red;
display: block;
}
Here is a working fiddle, you might have to make the output window wider to correctly see the result depending on your screen resolution http://jsfiddle.net/LysqB/