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>
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 am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</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'm using bootstrap's collapsible functionality to have a list of stores with expandable information.
The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours:
http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
This is the code I am using:
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?
Actually there's one simple solution to this if you want it.
Just put <div style="clear:both"></div> after every two col-xs-12 divs. And it will stop pushing the elements after it to the right.
You can see the example here.
Note: Remember, put clear div after every N collapsible div (it should be the same as the column number)
Try to use two separated columns for your panels. Something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-1">
xname-1
</a>
</h4>
</div>
<div id="xname-1" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-2">
xname-2
</a>
</h4>
</div>
<div id="xname-2" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-3">
xname-3
</a>
</h4>
</div>
<div id="xname-3" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-4">
xname-4
</a>
</h4>
</div>
<div id="xname-4" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-5">
xname-5
</a>
</h4>
</div>
<div id="xname-5" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-6">
xname-6
</a>
</h4>
</div>
<div id="xname-6" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
UPD. I've improved my Plinker. Now there are no superfluous repetitions in it. But I must warn you that I do not know Angular well.
http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
<div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
<div class="panel panel-default store-wrapper">
<div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
<h4 class="panel-title">
<a>
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I'm trying to achieve the setup illustrated below with Bootstrap 3, but I can't quite find a way to do it, especially to keep it responsive. I looked at panels and tables, etc. but then tend to not have really worked out great so far.
I figured it out in the end. Just took a bit of messing around with rows within the panels.
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default container-fluid">
<div class="row panel-heading ">
<div class="col-sm-1 pull-left"></div>
<div class="col-sm-4 col-xs-12">Asset ID</div>
<div class="col-sm-2 col-xs-12">Status</div>
<div class="col-sm-2 col-xs-12">Asset Nodes</div>
<div class="col-sm-3 col-xs-12">Manage</div>
</div>
</div>
<div class="panel panel-default container-fluid">
<div class="panel-heading row" role="tab" id="headingOne">
<div class="col-xs-1">
<div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div>
</div>
<div class="col-sm-4 col-xs-12">
xxx
</div>
<div class="col-sm-2 col-xs-12">Normal</div>
<div class="col-sm-2 col-xs-12">?</div>
<div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
dsfsdfd
</div>
</div>
</div>
</div>
http://www.bootply.com/NLxmcWu4SJ