I would like to know if its possible to move that bar a bit under, the bar is wrapped with a <p> tag.
<div class="span9 well">
<div class="row-fluid">
<div class="row-fluid">
<div class="span2">
<img src="dummy_image.jpg" class="img-polaroid">
</div>
<div class="span7">
<h2>Title</h2>
<p>Texttttttttttttttttt.</p>
<p >
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
</div>
</div>
</div>
screen shot of the actual block i wanna change:
You can always name your <p> tag like so:
<p class="bar">
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
then use .bar {margin-top: 20px;} in your css code, it's not bad behaviour
Use position:absolute
.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}
DEMO
Related
I have a following HTML with Angular FlexLayout in it
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-between">
<span >
3123131
</span>
<span >
1231231
</span>
<span >
6568
</span>
<span >
989
</span>
</div>
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<div class=" line first"></div>
<div class=" line red"></div>
<div class=" line first"></div>
<div class=" line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
<span class=" large" style="text-align: left;">
12<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
68<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: left;">
45<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class=" " style="text-align: right;">
684
</span>
<span class=" ">
3514
</span>
<span class=" ">
21
</span>
<span class=" ">
354
</span>
</div>
</div>
The output of this is as below,
But I want them to be evenly aligned in the same straight line, I can't figure out what mistake I'm making in this
Stackblitz
To make horizontal alignment easier, you can define each item as having no width and a centered content. That can be achieved with an inline-flex container:
.centered {
display: inline-flex;
justify-content: center;
width: 0px;
}
After setting the centered class on the items to align, make sure that you use the same spacing on all lines (either space-around or space-between). This stackblitz shows what it looks like when space-around is used:
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">3123131</span>
<span class="centered">1231231</span>
<span class="centered">6568</span>
<span class="centered">989</span>
</div>
<div fxLayout fxLayoutAlign="space-around">
<div class="centered line first"></div>
<div class="centered line red"></div>
<div class="centered line first"></div>
<div class="centered line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
<span class="centered large">12<span class="percent">%</span></span>
<span class="centered large">68<span class="percent">%</span></span>
<span class="centered large">45<span class="percent">%</span></span>
<span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout fxLayoutAlign="space-around">
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">684</span>
<span class="centered">3514</span>
<span class="centered">21</span>
<span class="centered">354</span>
</div>
</div>
Using nth-child, how would I style the <span class=field-content>Martin McGurk</span> from the following HTML:
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
I would say, go with:
#callout span .field-content {background: #0cf;}
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
Or, if you really prefer :nth-child, use:
#callout span:nth-child(2) .field-content {background: #0cf;}
<div id="callout" class="owl-carousel">
<p>
<span class=field-content>Good service...</span>
<span>
<span class=field-content>Martin McGurk</span>
</span>
</p>
</div>
I have added 3 glpyhs inside my h3 tag and have applied a style to it however every glyph I add they seem to be moving upwards so they are not in line with each other like this (check link for picture)
This is how I have added the glyphs within the panel.
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title<span class="glyphicon glyphicon-trash panel-icons" /><span class="glyphicon glyphicon-trash panel-icons" />
<span class="glyphicon glyphicon-trash panel-icons" /></h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
and this is the custom css that I am applying to the panel.
.panel-icons{
float: right;
cursor:pointer;
}
You missed to close your span tags.
Also I should point out, span is not a self closing tag, as you have tried to make use of it.
.panel-icons {
float: right;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
Correct your markup to have the span properly close like so:
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
As your code is now, it thinks that each glyphicon is within the previous glyphicon and you haven't properly closed your span tag.
See this codepen link for a working example.
I am trying to add some text before and next to a progress bar in bootstrap. The way I want it to look is the follow:
<div class="project-container">
<h4 class="progress-label">Java</h4>
<div class="progress">
<div class="bar"
style="width: 60%;">
</div>
</div>
</div>
http://cssdeck.com/labs/ymqkhury
Just create an inline element with a float to left
Example
You also might want to increase the height of the bar to 18 pixels to match the title and the bar. Or decrease the line-height of the title.
just do a table around it:
<center>
<div style=max-width:460px;>
<div class="row">
<div class=col-xs-12>
<p>
<span class="pull-left"><strong>3456 Punti Esperienza</strong></span>
<span class="pull-right text-muted">20% Completato</span>
</p>
</div>
</div>
<div class=row>
<div class="col-xs-1">
<span class="label label-primary">Liv. 4</span>
</div><div class=col-xs-10>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
<div class="col-xs-1">
<span class="label label-success pull-right">Liv. 5</span>
</div>
</div>
</div>
</center>
see the example here http://jsfiddle.net/00gftvkm/
How can I wrap a glyphicon and a word together so that the icon is centered over or under the word. For an example:
<div class="row">
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera-retro"></i> </p>
<h1>Photography </h1>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-camera"></i> </p>
<h1>Rentals</h1>
<p></center></p>
</div>
</div>
<div class="span4">
<div style="font-size: 60px;">
<i class="icon-star-empty"></i> </p>
<h1>Dance Media</h1>
<p></center></p>
</div>
If I understand your question correctly, you need to put text-align: center; in the div that contains the text and the icon. Check out this example: http://jsfiddle.net/rahjU/11/