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.
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 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>
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 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'm using Twitter Bootstrap to take away a lot of the CSS work for me. I want to use their Panels for a sort of "Post" by a User. I'd like to have the Title section include Edit/Delete Hyperlinks on the RIGHT side of the Title, while the Title itself is aligned on the left.
I've tried this with no success:
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#vModel.Title <span class="text-right">Hey</span></h3>
</div>
<div class="panel-body">
#vModel.Blog
</div>
</div>
</div>
Title should be aligned on the left (as it does by default) but I want the additional text "Hey" to show up on the RIGHT side.
EDIT:
http://getbootstrap.com/dist/css/bootstrap.css
Twitter bootstrap has two class which can help you.
First is .text-right and second is .pull-right so add this two class and see.
tiny clearfix does it
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title pull-left">
Works fine for me!
</div>
<div class="panel-title pull-right">Text on the right</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">Panel content</div>
</div>
You can try it here http://jsfiddle.net/b1Lec5ge/
Add float:right and remove text-align: right
.text-right {
float:right;
}
Working solution for question
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-4 text-left panel-title">#vModel.Title</div>
<div class="col-md-8 text-right"><a>hyperlink1</a> <a>hyperlink2</a></div>
</div>
</div>
<div class="panel-body">
...
</div>
</div>
Each section of panel can hold row(s) with col-xx-xx
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-4 text-left">Header left</div>
<div class="col-md-4 text-center">Header center</div>
<div class="col-md-4 text-right">Header right</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 text-right">Body left align right</div>
<div class="col-md-6 text-left">Body right align left</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-3 text-center">Footer 1/4 center</div>
<div class="col-md-3 text-center">Footer 2/4 center</div>
<div class="col-md-3 text-center">Footer 3/4 center</div>
<div class="col-md-3 text-center">Footer 4/4 center</div>
</div>
</div>
</div>
Here you have a snipplet with col-xs-xxx for match small screen. Documentation here.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-4 text-left">Header left</div>
<div class="col-xs-4 text-center">Header center</div>
<div class="col-xs-4 text-right">Header right</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 text-right">Body left align right</div>
<div class="col-xs-6 text-left">Body right align left</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-3 text-center">Footer 1/4 center</div>
<div class="col-xs-3 text-center">Footer 2/4 center</div>
<div class="col-xs-3 text-center">Footer 3/4 center</div>
<div class="col-xs-3 text-center">Footer 4/4 center</div>
</div>
</div>
</div>
Left and right buttons in panel header. You can replace these buttons with links.
<div class="panel-heading text-right">
<div class="nav"><!-- clears floated buttons -->
<div class="btn-group pull-left" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><i class="fa fa-toggle-on"></i>
</label>
</div>
<div class="btn-group pull-right" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><i class="fa fa-trash"></i>
</label>
</div>
</div>
</div>
I think this can help too. You can use both bootstrap rows and columns to divide the panel into two, like I did here:
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<p>Text on left</p>
</div>
<div class="col-md-6">
<p>Text on right</p>
</div>
</div>
</div>
</div>