I have this webpage:
It looks like this when I try to print it:
It's missing the last item (user management) intentionally so that's not a problem.
But I'd like to hide the "(/campaigns)" and "(/profanity)" from the print.
Is that possible using CSS?
--EDIT--
This is the HTML:
<div class="row">
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Campaigns</div>
<a href="/campaigns" class="text-muted">
<i class="fa fa-bullhorn"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Campaigns active</th>
<td>1/1</td>
</tr>
<tr>
<th>Total posts</th>
<td>149</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">Profanity</div>
<a href="/profanity" class="text-muted">
<i class="fa fa-filter"></i>
</a>
<table class="table table-striped table-condensed">
<tbody><tr>
<th>Created profanity filters</th>
<td>0</td>
</tr>
<tr>
<th>Total words filtered</th>
<td>0</td>
</tr>
</tbody></table>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 text-center">
<div class="lead">User management</div>
<a href="/account" class="text-muted">
<i class="fa fa-users"></i>
</a>
</div>
</div>
The #media tag supports print.
So if you want your blocks not to be displayed when in print, use the following code:
#media print {
.noprint {
display: none !important;
} }
Just add "noprint" to any element you want.
I recognize the classes, this is a bootstrap issue, as you will find in bootstrap.css this rule
#media print {
...
a[href]:after {
content: " (" attr(href) ")";
}
...
}
overwrite this rule and you should be golden, eg content:none;
add a class to your CSS called noprint for paper:
#media print {.noprint{display:none;}}
and then append that class to your code
eg:
<div class="comment noprint"> ... </div>
Related
I'm trying to implement an ordered list with a collapsible part inside the li elements. The idea is to have some basic information about a given context and by clicking on the link you get further information. The code is working but the numbering (1.) is not vertical-align with the content (Click to collapse) and I don't know how it can implement that properly. I'm not a css guru, so maybe you can help me.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-start">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
You can make your list-group-item grid (add .d-grid, .grid-template) and make custom grid areas to place inner content to special cells, see Code Snippet CSS part.
Also for shorts in CSS, toggle-button can be wrapped to .grid-template-toggle class and collapse block class list can be extended by .grid-template-collapse.
.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content 1fr;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
.grid-template {
grid-template-areas: 'num toggle' 'collapse collapse';
grid-template-columns: min-content auto;
}
.grid-template:before {
grid-area: num;
}
.grid-template-toggle {
grid-area: toggle;
}
.grid-template-collapse {
grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="list-group list-group-numbered">
<li class="list-group-item d-grid grid-template">
<div class="d-flex justify-content-between align-items-start grid-template-toggle">
<div class="ms-2 me-5">
<div class="fw-bold">
<a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
href="#collapseExample">Click to collpase</a>
</div>
some information
</div>
<div class="ms-2 ms-5 me-auto">
some more information
</div>
<span class="badge bg-primary rounded-pill">42</span>
</div>
<div class="collapse grid-template-collapse" id="collapseExample">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Foo, Bar</th>
<th>Foobar</th>
<th>FoobarBaz</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text</td>
<td>More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
<td>More text text text More text text text</td>
</tr>
</tbody>
</table>
</div>
</li>
</ol>
in my application, I use a lot the bootcard .card class.
Only, very often when I switch to mobile view, I notice a big overflow, which causes a display bug, and my whole page is found shifted.
Which means that I have to change the code in my .card class each time to make sure everything fits even in mobile view. It's very weird
On large screen :
On small screen :
This is the code :
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks for your help !
If it possible replace the table with columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<button class="btn btn-light btn-sm mb-1 float-sm-right">Ne pas résilier l'abonnement</button>
</h5>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-4">
<h5>PRODUIT</h5>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<p class="text-secondary">
basic
</p>
</div>
<div class="col-12 col-sm-4">
<h5>PROCHAINE FACTURE</h5>
<p class="text-secondary">
Pas de prochaine facture
</p>
</div>
<div class="col-12 col-sm-4">
<h5>CRÉÉ LE</h5>
<p class="text-secondary">
03/04/2020
</p>
</div>
</div>
</div>
</div>
</div>
Add class table-responsive to the table:
body{ width: 360px; } /* Galaxy S */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless table-responsive">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have this code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>{{ $employee->first_name }}</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>{{ $employee->last_name }}</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>{{ $employee->id_number }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">
Sites
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/aq9Laaew/206869/
I would like the two sections on the right (external training and clients) to be underneath one another (when on a desktop). How does one do that in Bootstrap?
I know very little about front-end development. This is a learning curve for me.
To achieve that using Bootstrap layout utility classes, all you need is to place all your cards into one column, instead of adding a row for each card:
<div class="row">
<div class="col-lg-4">
... your left column card here...
</div>
<div class="col-lg-8">
... rest of your cards here...
</div>
</div>
Working example:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
}
.card {
margin-top: 15px;
}
.card + .card:last-child {
margin-bottom: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>Jane</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>Doe</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>123456789123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">
Sites
</div>
</div>
</div>
</div>
</div>
Please note your current question title doesn't relate too well to the actual problem. You're basically asking a layout utility question. Whatever you place in your layout has no relevance for solving/answering it.
I think this is what you want
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">Employee Information</div>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td scope="row">First Name: </td>
<td>Jane</td>
</tr>
<tr>
<td scope="row">Last Name: </td>
<td>Doe</td>
</tr>
<tr>
<td scope="row">ID Number: </td>
<td>123456789123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">External Training Records</div>
<div class="card-body">
External Training Records:
</div>
</div>
<div class="card">
<div class="card-header">Clients</div>
<div class="card-body">
Clients:
</div>
</div>
</div>
<div class="col-md-8 offset-md-4"></div>
<div class="col-md-8 offset-md-4">
<div class="card">
<div class="card-header">Site</div>
<div class="card-body">Sites</div>
</div>
</div>
</div>
</div>
So heres my situtation, after I layed out the correct alignments of this emergency contact details of countries, I tried adding json to it. Unfortunately json scambled up my texts. I tried using another col grid inside "col-md-12" to no avail. I also tried bootstrap pull-right and pull-left but the hotline name and the number still does not align properly. I would like to have some advice to what can be done to position the texts.
Here is what its supposed to do: (imagine the flag is in the left side and the number are supposed to be aligned like a column)
Brunei
Ambulance: 991
Police: 993
Fire and Rescue: 995
Search and Rescue: 998
................................................................................................
Here is the current mess of text:
mess of hotlines
Thank you for the time and cooperation to anyone responding
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6 services-margin" ng-repeat="service in services | filter:search">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
<div class="country-title col-md-3" ng-bind="service.country"></div>
<p class="col-md-3" ng-bind="service.hl1"></p>
<span class="pull-right" ng-bind="service.hl1num1"></span>
<span class="pull-right" ng-bind="service.hl1num2"></span>
<span class="pull-right" ng-bind="service.hl1num3"></span>
<p ng-bind="service.hl2"></p>
<span class="pull-right" ng-bind="service.hl2num1"></span>
<span class="pull-right" ng-bind="service.hl2num2"></span>
<span class="pull-right" ng-bind="service.hl2num3"></span>
<p ng-bind="service.hl3"></p>
<span class="pull-right" ng-bind="service.hl3num1"></span>
<span class="pull-right" ng-bind="service.hl3num2"></span>
<span class="pull-right" ng-bind="service.hl3num3"></span>
<p ng-bind="service.hl4"></p>
<span class="pull-right" ng-bind="service.hl4num1"></span>
<span class="pull-right" ng-bind="service.hl4num2"></span>
<span class="pull-right" ng-bind="service.hl4num3"></span>
</div>
</div>
</div>
To align the image to the left and have the content on the right I would use the media object
and for proper alignment to right, why not use tables?
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<table class="table">
<tr>
<td ng-bind="service.hl1">Service 1</td>
<td style="text-align:right">
<div ng-bind="service.hl1num1">111</div>
<div ng-bind="service.hl1num2">222</div>
<div ng-bind="service.hl1num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl2">Service 2</td>
<td style="text-align:right">
<div ng-bind="service.hl2num1">111</div>
<div ng-bind="service.hl2num2">222</div>
<div ng-bind="service.hl2num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl3">Service 3</td>
<td style="text-align:right">
<div ng-bind="service.hl3num1">111</div>
<div ng-bind="service.hl3num2">222</div>
<div ng-bind="service.hl3num3">333</div>
</td>
</tr>
<tr>
<td ng-bind="service.hl4">Service 4</td>
<td style="text-align:right">
<div ng-bind="service.hl4num1">111</div>
<div ng-bind="service.hl4num2">222</div>
<div ng-bind="service.hl4num3">333</div>
</td>
</tr>
</table>
</div>
</div>
</div>
https://jsfiddle.net/ktbmLaq8/
I am working on site which is based on table-layout (no div). Now requirement change and has to re-create so that it look responsive, and for responsive we choose bootstrap as option.
Now, How can I convert tables layout into bootstrap grid layout so can 1. look not change, 2. have responsive also.
table-layout is too complex in site. lots of nesting is there. For example:
<table border="0" width='100%' bgcolor='#ff00ff'>
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
<td align='right'>
<table border="0" cellspacing="0">
<tr>
<td align='center' colspan='3'>
<span>Another tesing text</span>
<span style='color:#FFFFCC;'> - </span>
<span style='font-size:11px;color:#fffff;'>Random text</span>
</td>
</tr>
</table>
</td>
</tr>
For example how can I convert above code with bootstrap row, col-*-* grid-layout.
Trust me, I tried a lot to convert this, but sometime looks change or some time just not work at all.
General suggestion on how to convert table base layout into bootstrap are also welcome.
Here is some great literature: Bootstrap 3 Grid system
Replace table and tbody with div class="container"
Replace tr with div class="row"
Replace td with div class="col-ww-nn"
Where ww is device width (xs, sm, md, lg)
Where nn is a number 1-12 for width percentage (divided by 12)
Below is your updated code (including some syntax fixes too). Note, I've added responsiveness so that on phones (xs devices) your second main column would be a separate line. And you can make images responsive with img-response so that it's size changes with the device.
<div class="container" style="background-color:#ff00ff">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<img src="#" class="img-responsive">
</div>
<div class="col-xs-4 col-sm-4">
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:10px;color:#cccccc;">Alpha testing</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<span>Another tesing text</span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="color:#ffffcc;"> - </span>
</div>
<div class="col-xs-4 col-sm-4">
<span style="font-size:11px;color:#ffffff;">Random text</span>
</div>
</div>
</div>
</div>
</div>
Actually it is not so complex.
Just skip every <table> and <tbody> tag, treat every <tr> as block element with class="row" and every <td> as block element with class="col-*-*". Nesting Bootstrap grid is totally okey, so if you have somthing like that:
<tr style='padding-bottom:1em;'>
<td>
<table border="0">
<tr valign='bottom'>
<td width='50'> </td>
<td>
<img border="0" src="#" width="100" height="300">
</td>
<td width='25'> </td>
<td>
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</td>
</tr>
</table>
</td>
</tr>
Just do:
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"> </div>
<div class="col-xs-6">
<img border="0" src="#" width="100" height="300">
</div>
<div class="col-xs-10"> </div>
<div class="col-xs-2">
<span style='font-size:10px;color:#cccccc;'>Alpha testing</span>
</div>
</div>
</div>
</div>
Ofcourse those are just example Bootstrap classes - you don't have to stick with numbers ;)