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>
Related
I have a row of thumbnails like this:
I want them to be equal height though. This is my code:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
</div>
Is this possible? Like we see in bootstrap4 here is equal height cards:
http://www.codeply.com/render/KrUO8QpyXP#
I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.
Thumbnails with flexbox
You can also do more with the position of child elements.
Also see,
make Bootstrap columns all the same height
It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.
Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
I have 2 different partial views that I am calling in my main view like this:
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Now my problem is this:
All I have done is put background-color: green in my CSS for the class .next-game (honestly just to see what it looked like.. green is not what I am going to use)... I have gone into Inspect Element on IE and I cannot find the problem as to why the background is so big. I just want the background to be around The Next Game Is:
CSS:
.next-game{
background-color: green;
}
How do I shrink the background? I have tried width: 50%; height: 10px; //etc just to see the different changes but can't figure this out
UPDATE:
I have changed the HTML to:
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
</div>
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
This at least made the background render properly. So this has something to do with the partial views?
The most likely cause for this issue is that your twitter bootstrap columns have no wrapping row. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. Below is a possible solution to the problem.
<div class="container">
<div class="row">
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
</div>
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Other solutions include adding a .clearfix class to a wrapper for the columns or adding clear:both to .next-game.
You need
.next-game h3{
background-color: green;
}
(it's just for the header h3 inside the element with that class .next-game)
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 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