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/
Related
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
I have a question. I have a bootstrap (3) grid with 2 columns. insight the right column I am using 'center-block' to position elements in the center. For some reason it doesnt do nothing. What am I doing wrong? Thanks!!
https://jsfiddle.net/codingcodingcoding/mbw45xdh/1/
<section id="contact">
<div class="container-fluid">
<h2 class="section-heading text-center">Let's Get In Touch!</h2>
<div class="row">
<div class="col-md-6">
<div id="googleMap"></div>
</div>
<div class="col-md-6">
<div class="center-block">
<span class="glyphicon glyphicon-earphone phone-icon"></span>
<span class="glyphicon glyphicon-envelope email-icon"></span>
<p>
feedback#example.com
</p>
</div>
</div>
</div>
</div>
</section>
You have to use your text-center class in div element
like:
<section id="contact">
<div class="container-fluid">
<div class="text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
</div>
<div class="row">
<div class="col-md-6">
<div id="googleMap"></div>
</div>
<div class="col-md-6">
<div class="center-block">
<span class="glyphicon glyphicon-earphone phone-icon"></span>
<span class="glyphicon glyphicon-envelope email-icon">
</span>
<p>
<a href="mailto:your-email#your-
domain.com">feedback#example.com</a>
</p>
</div>
</div>
</div>
</div>
</section>
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I want to place an image at the bottom right corner of a text and that text should take col span of 5. I have the following code and it creates a scroll bar vertically on the page.
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-5 col-md-5">
<div class="Mymsg">Welcome to Era</div>
<div class="msg">here you are!</div>
</div>
<div class="media">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>
</div>
</div>
Please add two more classes col-sm-7 col-md-7 for the media:
<div class="media col-sm-7 col-md-7">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>
I did a fiddle to explain my example: http://jsfiddle.net/ag76W/
I want one div at bottom other div with bootstrap, but this only happens when the screen is mobile or tablet. In a normal screen my second div set at right of first.
<div class="row">
<div class="col-sm-4 animated bounceInLeft">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text">titulo</span>
</div>
</div>
</div>
<div class="col-sm-4 animated bounceInDown">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text" ng-bind="company.company"/>
<span class="pull-right" style="margin-left:1em;">
<span>aaaa</span>
<span class="pull-right" style="margin-left:1em;"></span>
</div>
</div>
</div>
</div>
Any idea?
I did it..onlye set float none at first div.
Copy the code for if help anyone.
<div class="row">
<div class="col-sm-4 animated bounceInLeft" style="float:none !importnant">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text">titulo</span>
</div>
</div>
</div>
<div class="col-lg-4 animated bounceInDown">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-save"></span>
<span class="panel-title text" ng-bind="company.company"/>
<span class="pull-right" style="margin-left:1em;">
<span> aaaa</span>
<span class="pull-right" style="margin-left:1em;"></span>
</div>
</div>
</div>
</div>