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>
Related
Image attached is the button from display of two different sizes (24inch and 13inch), button on 24inch display appears normal whereas add to cart button on 13inch display is broken.13inch display button 24 inch display button
<div class="row my-5" id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div class="col-2">
<div class="d-flex justify-content-center">
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
</a>
</div>
</div>
<div class="col-6">
<div class="h-100 d-flex flex-column justify-content-between">
<span>
<a href="./" class="text-decoration-none text-muted fs-4">
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p class="m-0">Artist: Karin White</p>
</div>
</div>
<div class="col-2">
<div class="h-100 d-flex align-items-center justify-content-center">
<span class="fw-bold">$ 1120.00</span>
</div>
</div>
<div class="col-2">
<div class="h-100 d-flex align-items-center justify-content-between">
<button id="btnRemove" class="btn btn-outline-danger">Remove</button>
<button id="btnCart" class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>
Welcome to stackoverflow.
You can use cols with a breakpoint prefix to adjust the layout. (e.g. col-xxl-2 col-3). Read Bootstrap Breakpoints and Grid options for more information. Also, since Bootstrap is sensitive to pixels, it is much better to consider pixels instead of inches.
Example:
<div class="container">
<div class="row my-5" id="3">
<span id="lblArtworkId" style="display: none;">3</span>
<div class="col-xxl-2 col-3">
<div class="d-flex justify-content-center">
<a href="./">
<img src="upload/artworks/Artwork3.jpg" alt="" class="card-img-top" style="max-height: 8rem;">
</a>
</div>
</div>
<div class="col-xxl-6 col-9">
<div class="h-100 d-flex flex-column justify-content-between">
<span>
<a href="./" class="text-decoration-none text-muted fs-4">
Construction in Red, Blue & Yellow Drawing
</a>
</span>
<hr>
<p class="m-0">Artist: Karin White</p>
</div>
</div>
<div class="col-xxl-2 col-4">
<div class="h-100 d-flex align-items-center justify-content-center">
<span class="fw-bold">$ 1120.00</span>
</div>
</div>
<div class="col-xxl-2 col-8">
<div class="h-100 d-flex align-items-center justify-content-between">
<button id="btnRemove" class="btn btn-outline-danger w-50 mx-1">Remove</button>
<button id="btnCart" class="btn btn-primary w-50 mx-1">Add to Cart</button>
</div>
</div>
</div>
</div>
Edit
Don't forget to include the required meta tags:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
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>
In a Bootstrap carousel item, I have a row of images nested in Bootstrap columns. Their height varies according to the width of columns. In the same row, there are also carousel controls LEFT and RIGHT for changing the items of the carousel.
I need to have the controls left (<) and right (>) vertically centered to the row. How can this be acomplished?
I tried to remove the row class and use the dislay: table and table-cell, which aligned controls vertically, but whole responsiveness was lost.
Example here: http://testabc.borec.cz/
HTML (carousel):
<div id="monthly-tips" class="carousel slide showcase showcase-1 text-center"><!-- class of slide for animation -->
<h1>Title</h1>
<div class="carousel-inner">
<div class="item container-fluid active">
<div class="row" style="display: flex;
align-items: center;">
<div class="col-xs-1 nopadding">
<a class="carousel-control left" href="#monthly-tips" data-slide="prev">
<span class="gi gi-chevron-left"></span>
</a>
</div>
<div class="col-xs-10 col-sm-5 col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<img src="./img/books/tanec-s-nepritelem.jpg" class="envelope js-book2" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="col-xs-1 nopadding">
<a class="carousel-control right" href="#monthly-tips" data-slide="next">
<span class="gi gi-chevron-right"></span>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
<div class="row info-holder">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<p class="book-title">Syn správce sirotčince</p>
<p class="book-author">Adam Johnson</p>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div>
</div><!-- carousel monthly-tips -->
You can add a new css property align-items on your .row container like this :
CSS :
.row { // add a new class to your row and target your newest class
display: flex;
align-items: center;
}
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>