I'm using bootstrap with angular, but the panels aren't working correctly. I can confirm the files are in the right spots.files
This is what it looks like: result
I can use btn and btn-primary, but not panel. What could be causing this issue?
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<button class="btn btn-success">test</button>
</body>
</html>
If you are using Bootstrap 4 read this:
Panels, thumbnails, and wells
Dropped entirely for the new card component.
Panels
.panel to .card, now built with flexbox.
.panel-default removed and no replacement.
.panel-group removed and no replacement. .card-group is not a replacement, it is different.
.panel-heading to .card-header
.panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
.panel-body to .card-body
.panel-footer to .card-footer
.panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
.panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
.panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
.panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
.panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)
https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells
For Bootstrap 4, panels have been dropped in favour of cards
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
Hit: ctrl+shift+i or Right click and choose inspect then click on console to make sure you dont have issue and The bootstrab JavaScript file is called
and but that code in html file
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
but your bootstrap.js file at the end of body tag
i suggest you add a all panel items, i think you should add panel-heading and panel-footer and in addition to a container.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<div class="panel panel-default">
<div class="panel-heading">
<p>This a title</p>
</div>
<div class="panel-body">
Basic panel example
</div>
<div class="panel-footer">
<button class="btn btn-success">test</button>
</div>
</div>
</div>
</div>
</body>
Related
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
For some reason bootstraps panel class doesn't seem to be getting applied here:
<div class="container main-content">
<div class="row">
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading">
<img src="http://cliparts.co/cliparts/8TE/6jz/8TE6jzq9c.png" class="stats-image" />
<h3>ACHIEVERS</h3>
</div>
<div class="panel-body stats-body">
<span class="stats-value">37%</span>
</div>
</div>
</div>
</div>
</div>
Plnkr here:
http://plnkr.co/edit/7e3mXCDixuJ4U06lu3TX?p=info
what am i missing here ?
You are using Bootstrap 4 alpha 2 which might not be having panel support. I couldn't find panel documentation here:
http://v4-alpha.getbootstrap.com/components/alerts/
Instead, try using bootstrap 3.3.6 in the plunk
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="bootstrap#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js" />
I tried having a header with an inverted color but that did not change anything.
I also tried changing the header to a segmented control but that still leaves a white gap at the top and also has round corners
It is not currently available in semantic-ui. You may want to set a different color by using a custom css code:
$('.ui.modal').modal('show');
.ui.modal > .header{
background-color: gold !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui modal">
<i class="close icon"></i>
<div class="header">
This is a modal with custom header background
</div>
<div class="content">
<div class="description">
A description can appear on the right
</div>
</div>
<div class="actions">
<div class="ui button">Cancel</div>
<div class="ui button">OK</div>
</div>
</div>