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>
Related
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.
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 am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo
I am trying to get the image and content side by side in the layout. Something like the way they have done it here. I have tried the bootstrap grid layout for doing it but I am just not getting it right plus it is not responsive.Can someone please help me out with this.
Here is the skeleton of the code:
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-2">
<img src=""/>
</div>
<div class="col-lg-4">
<div><h4></h4></div>
<p class="text-muted"></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
//image here
</div>
<div class="col-md-8">
//text here
</div>
Hope this helps!
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.