I'm trying to create two columns in a box-title within the box-header. It works in the box-body but it only spans half of the length of the title. It would be very useful if I could do it. Can anyone help please?
<div class="box box-info">
<div class="box-header with-border">
<div class="box-title">
<div class="row">
<div class="col-md-6">
<h4>New Character</h4>
</div>
<div class="col-md-6">
<h4>Old Character</h4>
</div>
</div>
</div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="" data-original-title="Collapse">
<i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-6">
<h6>left side</h6>
</div>
<div class="col-md-6">
<h6>right side</h6>
</div>
</div>
</div>
</div>
I have removed the box-title and I can see the two column across the header. Maybe no the most elegant solution but it works.
Related
I'm struggling with a rather simple task but the lack of CSS experience is getting the better of me:
<div class="row">
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
</div>
Above is a row on my view. There are many like it:
I want to split the smallest div to show a second Heading1. Here is base HTML:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Target:
I need to show more information and I see that the div card is empty on the right side. I want to split this div into two. Experimenting with bootstrap classes, the layout breaks.
Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Became this:
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
<small># of Transactions</small>
</div>
<div class="col-md-6">
<h1 class="no-margins">AED #Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
<small>Revenue generated</small>
</div>
</div>
</div>
I have three cols. The middle one contains a decimal number which could be in this formats:
XX.XX km
XXX.XX km
XXXX.XX km
So there could be two to four numbers before the dot and there are always two numbers after the dot.
My problem is if the number is more then two numbers befor the dot the unitary after the decimal number shifts. Then it is not in the alignment with the one under it.
This screenshot shows what I mean.
Is it possible to fix the middle col width so the unitary alignment is correct?
Also the unitary could be align-right?
This is the part of my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6">
<div>
<div class="row overall">
<div class="col-sm-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font align-middle" id="overall_distance">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-sm-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-sm-5">
<div class="values font" id="overall_time">
</div>
</div>
<div class="col-sm-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>
If I understand your question correctly, Just add text-right class in your value column
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6">
<div class="row overall">
<div class="col-xs-12 reducedMarginRight reducedMarginLeft">
<h4 class="font">Overall</h4>
<hr>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span class="align-middle">
<i class="glyphicon glyphicon-road glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font align-middle" id="overall_distance">690.05
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right" id="distanceFormat">
km
</div>
</div>
</div>
<div class="row vcenter">
<div class="col-xs-3">
<span>
<i class="glyphicon glyphicon-time glyphSize"></i>
</span>
</div>
<div class="col-xs-5 text-right">
<div class="values font" id="overall_time">07:20
</div>
</div>
<div class="col-xs-4">
<div class="values font text-right">
h
</div>
</div>
</div>
</div>
</div>
Quick question on bootstrap and columns/rows. I have a cascade effect that has managers, then employees, then employee family members.
The problem is that I do not have a full understanding of bootstrap and how it uses columns/rows.
I get this result when running my code at the bottom here
But I need this result
I know this is not achieveable with my current code... Any suggestions?
Thanks in advance!
<div class="container">
<div class="row">
#{i++;}
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##i">Manager Name</button>
<div id="#i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
j++;
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="##j">Employee Name</button>
<br />
<div id="#j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
<br />
</div>
<br />
</div>
<div class="col-md-2">
<br />
<br />
</div>
</div>
</div>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<br />
Rather than putting rows inside of columns, you'll have to make a bunch of rows on the same level instead. Otherwise the new rows would only be the width of the column it was placed in. Also, container-fluid to make it fully full width if you'd like.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#i">Manager Name</button>
</div>
<div class="col-md-1">
Edit Button
</div>
<div class="col-md-7">
Delete Button
</div>
</div>
<div id="i" class="collapse">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<h5>Employees</h5>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#j">Employee Name</button>
</div>
</div>
</div>
<div id="j" class="collapse">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<h5>Employee Fam Members</h5>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
#Html.ActionLink(Employee Fam Member Name, blah, blah)
</div>
</div>
</div>
</div>
I cant seem to see why the content below is not going into the box which it's inside as defined within the HTML
This is the image because I do not have enough rep yet to add it to the formatting http://i.stack.imgur.com/A3nWx.png
This is the HTML which I am using
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Title</h2>
</div>
<div class="box-body">
<div class="col-md-1">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
</div>
Option 1
Looking at your code, I suppose you are using Twitter Bootstrap.
From you code you have the column <div class="col-md-1"> class inside the outer column <div class="col-md-4">.
For example:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-1">
</div>
</div>
</div>
</div>
</div>
</div>
Please note that bootstrap requires that you wrap a columns with a <div class="row"> so as to clear the float.
Option 2
You could add clear: both; in the class .box-body in your css code. It will clear the column float.
md_5 Hi there. Looks like you are wanting to have the title have it's own area from the box-body.
How about something like this example.
I use some color to show each block.
Here is the Fiddle.
<div class="container col-xs-6 block1">
<div class="row">
<div class="col-md-4">
<div class="block-title bg-primary">
<h2>Title</h2>
</div>
<div class="box-body col-md-12 bg-info">
<h4>Server 1</h4>
<span class="label label-success">Online <i class="fa fa-check"></i></span>
</div>
</div>
</div>
</div>
To fix this I added the clearfix class. Thanks for reminding me, Math4w.
Here is a link to some documentation regarding the clearfix class: http://getbootstrap.com/css/#grid-responsive-resets
So the final code looked like this,
<div class="row">
<div class="col-md-4">
<div class="block">
<div class="block-title">
<h2>Servers</h2>
</div>
<div class="clearfix">
<div class="col-md-4">
<p class="well text-center">
<strong>Server 1</strong>
</br>
<span class="label label-success"><i class="fa fa-check">Online</i></span>
</p>
</div>
</div>
</div>
</div>
</div>
I am trying to create 3 columns inside a panel but for some reason the xs viewport does not look right. The last column moves below the row. You can see it on this jsfiddle.
Any clues what I might be doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default content-parent">
<div class="panel-header content-header">
<div class="row content-header-assets">
<div class="col-xs-1">
<i class="fa fa-angle-left content-header-actions"></i>
</div>
<div class="col-xs-10">
<h1 class="content-header-title text-center">Some long text</h1>
</div>
<div class="col-xs-1">
<i class="fa fa-angle-right content-header-actions"></i>
</div>
</div>
</div>
<div class="panel-body">
<div class="content-body col-xs-12 col-sm-10 col-md-9 col-lg-7 block-center">
</div>
</div>
<div class="panel-footer content-footer text-center">
</div>
</div>
</div>
</div>
</div>
.col-*-1 is 8.33333333% of the space provided, so your content (the .fa .fa-angle-right/left) doesn't fit since it's larger than 8.333%. This is not the best solution for this type of layout, but you can try .col-xs-2 on the left and right and .col-xs-8 on the middle.