I am trying to make my site more user friendly, I have a table as shown in the image below which is putting lines under the text of the columns that have bootstrap classes to remove them on smaller screens.
I can't seem to get rid of this issue. I am using standard bootstrap 4 CSS.
My code for the table looks like this, appreciate the help.
<div class='container mx-auto' style='width: 100%'>
<table class='table table-hover' style='width: 100%'>
<thead class='bg-primary text-white'>
<tr>
<th class='bg-primary text-white border-left border-right d-none d-xl-block'>ID</th>
<th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
<th class='bg-primary text-white d-none d-lg-block'>Venue</th>
<th class='bg-primary text-white'>Comp</th>
<th class='bg-primary text-white border-left border-right d-none d-lg-block'>M/F</th>
<th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
<th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
<th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
<th class='bg-primary text-white border-left border-right d-none d-md-block'>Referee</th>
<th class='bg-primary text-white border-left border-right text-center'>Edit</th>
<th class='bg-primary text-white border-left border-right text-center'>Delete</th>
</tr>
</thead>
<tbody>
<?php
if($result = mysqli_query($link,$sql)) {
while ($row = mysqli_fetch_array($result)) {
echo "
<tr>
<td class='border-left border-right d-none d-xl-block'>{$row[6]}</td> <!-- ID -->
<td class='border-left border-right'><a href='viewMatch.php?matchID={$row[6]}'>{$row[0]}</a></td><!-- Date -->
<td class='text-left border-left border-right d-none d-lg-block'>{$row[1]}</td><!-- Venue -->
<td class='border-left border-right'>{$row[2]}</td><!-- Comp -->
<td class='border-left border-right d-none d-lg-block' style='text-align:center'>{$row[7]}</td><!-- Gender -->
<td class='border-left border-right'>{$row[3]}</td><!-- Home Team -->
<td class='border-left border-right' style='text-align:center'>{$row[8]}</td><!-- Home Score -->
<td class='border-left border-right' style='text-align:center'>{$row[9]}</td><!-- Away Score -->
<td class='border-left border-right'>{$row[4]}</td><!-- Away Team -->
<td class='border-left border-right d-none d-md-block'>{$row[5]}</td><!-- Referee -->";
if($role >= 5) {
echo "
<td class='border-left border-right text-center'>
<form action='../edit/updateMatch.php' method='POST' onsubmit=''/>
<input type='hidden' name='q' value='".$row[6]."'/><button class='btn btn-primary' type='Submit' value='Update'><i class='fa fa-edit'></i></button>
</form>
</td>";
}
if($role > 5) {
echo "
<td style='text-align:center'>
<form action='../delete/deleteMatch.php' method='POST' onsubmit='' onclick='return confirm(`do you want to delete {$row[3]} vs {$row[4]} on the {$row[0]}`)'/><input type='hidden' name='q' value='".$row[6]."' /><button class='btn btn-danger' type='Submit' value='Delete'><i class='fa fa-trash'></i></button>
</form>
</td>";
}
echo "
</tr>";
}
echo "
</tbody>
</table>
</div>
</div>";
the problem is with -block suffix in the classes. You should use -table-cell instead.
See more in documentation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class='container mx-auto' style='width: 100%'>
<table class='table table-hover' style='width: 100%'>
<thead class='bg-primary text-white'>
<tr>
<th class='bg-primary text-white border-left border-right d-none d-xl-table-cell'>ID</th>
<th class='col-2 bg-primary text-white border-left border-right'>Date</a></th>
<th class='bg-primary text-white d-none d-lg-table-cell'>Venue</th>
<th class='bg-primary text-white'>Comp</th>
<th class='bg-primary text-white border-left border-right d-none d-lg-table-cell'>M/F</th>
<th class='col-2 bg-primary text-white border-left border-right'>Home Team</th>
<th colspan='2' class='col-1 bg-primary text-white border-left border-right text-center'>Score</th>
<th class='col-2 bg-primary text-white border-left border-right'>Away Team</th>
<th class='bg-primary text-white border-left border-right d-none d-md-table-cell'>Referee</th>
<th class='bg-primary text-white border-left border-right text-center'>Edit</th>
<th class='bg-primary text-white border-left border-right text-center'>Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
Related
I am using Bootstrap5 responsive display - hiding elements to display fewer columns on mobile devices. I have been able to do this, however the values of the cells for the columns that are hidden for mobile devices are no longer visible when the columns become visible for larger devices.
I would appreciate any help with this.
I have used the following code within the success block of an AJAX call:
result.data.forEach(datapoint => {
$('#dataTable').append(`<tr>
<td class="fontBurgE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.firstName}</td>
<td class="fontStyleE">${datapoint.lastName}</td>
<td class="d-none d-sm-table-cell" class="fontBurgE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.email}</td>
<td class="d-none d-sm-table-cell" class="fontStyleE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.jobTitle}</td>
<td class="d-none d-md-table-cell" class="fontBurgE">${datapoint.department}</td>
<td class="d-none d-sm-table-cell" class="fontStyleE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.location}</td>
<td class="btn-group>
<button type="button" class="btn btn-white btn-sm rounded-pill py-0 editbutton" data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#editModal" id="edit">
<i class='fas fa-pen editbutton' style='font-size:16px;color:slategrey;position:relative;top:5px; ' data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#editModal" id="edit"></i>
</button>
<button type="button" class="btn btn-white btn-sm rounded-pill py-0 deletebutton" data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class='far fa-trash-alt' deletebutton' style='font-size:18px;color:thistle' data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#deleteModal"></i>
</button>
</td>
</tr>`)
})
<div class="card mb-3" id="userscroll">
<div class="card-body">
<div class="container">
<table id="datatableID" class="table table-striped table-bordered table-hover display nowrap" cellspacing="0">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="d-none d-sm-table-cell">Email</th>
<th class="d-none d-sm-table-cell">Job Title</th>
<th class="d-none d-md-table-cell">Department</th>
<th class="d-none d-sm-table-cell">Location</th>
<th>Action</th>
</tr>
</thead>
<tbody id="dataTable" class="mt-5">
</tbody>
</table>
</div>
</div>
</div>
When I inspect a cell in dev tools I can see the expected value is there and the output is:
<td class="d-none d-sm-table-cell">the expected value</td> ==$0
I'm also using the dataTables plugin. Not sure if this matters.
In a (bootstrap-based) HTML page I have a table.
In a table cell, I'd like some content that is top-aligned, and some other content in the same cell that is bottom-aligned (there generally is enough vertical space). How can this be achieved? What I'd like to avoid is to work with fixed pixel spacing.
A MWE is here:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Please check out this. Do you want something like this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow"></div>
</td>
<td>
<div class="">top - aligned</div>
<div class="mt-5">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here I have added margin top to the button. class="mt-5"
You may add a column
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col" colspan="2">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td>
<div>top - aligned</div>
</td>
<td class="align-bottom text-right">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
or use absolute position
.bottom-right {
bottom: 0;
right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">H1</th>
<th scope="col">H2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="height: 100px; background-color: yellow" />
</td>
<td class="position-relative">
<div>top - aligned</div>
<div>
<button type="button" class="btn btn-primary btn-sm position-absolute bottom-right m-1">Bottom-right</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
If it is only a visual layout matter, rethink the structure without a table , possible example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container ">
<div class="container-fluid ">
<div class="row table-dark table-striped">
<div class="col-sm-6 p-0 border-bottom border-secondary">
<h2 class="px-3 border-bottom border-secondary">title 1</h2>
<div style="height: 100px;" class="m-3 bg-warning text-dark">100px</div>
</div>
<div class="col-sm-6 d-flex flex-column p-0 border-bottom border-secondary">
<h2 class="pr-3 border-bottom border-secondary m-0">title 2</h2>
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto p-3">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
<div class="col-sm-6 p-0 border-bottom border-secondary">
<div style="height: 150px;" class="m-3 bg-info ">150px</div>
</div>
<div class="col-sm-6 p-3 d-flex flex-column p-0 border-bottom border-secondary">
<div class="pr-3">top - aligned</div>
<div class="text-right mt-auto">
<div>
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>
It still would be nice to have a solution for a <table>, but I adopted the suggestion by #G-Cyrillus and used bootstrap classes to achieve this. If there is a better solution, please post, I will be happy to accept it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="container-fluid" >
<div class="row">
<div class="col-6" style="background-color: grey">
<img src="x" height=100 />
</div>
<div class="col-6" style="background-color: yellow">
<div class="h-100 d-flex flex-column">
<div class="row">
content at top
</div>
<div class="row align-items-end justify-content-end flex-grow-1" style="background-color: orange">
<button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to add these font awesome sort icons to a table and it's not aligning right. I also tried ml-auto and it's not aligning to the right properly.
What I want is, align that arrows to the right side of the cell.
Any help you can provide would be greatly appreciated.
Live Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
<table id="grid" class="table table-hover sortable">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string"><i class="fas fa-sort text-right"></i>Socre:</th>
<th data-type="number"><i class="fas fa-sort text-right"></i>Age:</th>
<th data-type="number"><i class="fas fa-sort text-right"></i>Student:</th>
<th class="wfixed" data-type="string">Status:</th>
</tr>
</thead>
</table>
</div>
Can you move them in the markup? If so just move them to the other side of the text.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="table-responsive shadow p-3 mb-5 bg-light rounded">
<table id="grid" class="table table-hover sortable">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string"></i>Score:<i class="fas fa-sort text-right"></th>
<th data-type="number"></i>Age<i class="fas fa-sort text-right">:</th>
<th data-type="number"></i>Student:<i class="fas fa-sort text-right"></th>
<th class="wfixed" data-type="string">Status:</th>
</tr>
</thead>
</table>
</div>
Goodnight.
Does anyone know how to keep the content inside the card using a table inside the card with MaterializeCSS?
Im working with VUE y MaterilizeCSS but it's de same without VUE.
Apparently the responsive table does not communicate with the card.
This is my code:
<div>
<h3>Artículos</h3>
<div class="row">
<div class="col s12 m12 xl12">
<div v-if="loading" class="center-align">
<div class="progress center-align">
<div class="indeterminate"></div>
</div>
</div>
<div class="card">
<div v-if="!loading" class="card-content black-text">
<span class="card-title">
Lista de Artículos <a class="waves-effect waves-teal btn-flat"><i class="material-icons">playlist_add</i></a>
<div class="input-field" style="font-weight: normal;">
<input placeholder="Buscar" id="first_name" type="text" class="validate"
v-model="search"
#keyup="get(1,search)">
</div>
</span>
<table class="highlight centered responsive-table">
<thead style="color: #5d5d5d; font-size: 13px;">
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Presentación</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr v-for="article in arrayArticles" :key="article.id">
<td v-text="article.code"></td>
<td v-text="article.name"></td>
<td v-text="article.presentation"></td>
<td v-text="article.description"></td>
<td v-text="article.category.name"></td>
<td v-text="article.minimum_stock"></td>
<td v-if="article.current_stock >= article.minimum_stock">
<span class="badge green" style="color: white">{{article.current_stock}}</span>
</td>
<td v-else>
<span class="badge red" style="color: white">{{article.current_stock}}</span>
</td>
<td>${{article.purchace_price}}</td>
<td>${{article.sale_price}}</td>
<td>${{article.sale_price - article.purchace_price}}</td>
<td>
<div v-if="article.condition">
<span class="badge green" data-badge-caption="Inactivo" style="color: white"></span>
</div>
<div v-else>
<span class="badge blue-grey lighten-3" data-badge-caption="Inactivo" style="color: white"></span>
</div>
</td>
<td class="center-align">
<i class="material-icons" style="margin-left: 2px; color:#ffc107; cursor:pointer;"
#click="getById(article), fillSelectCategories()">edit</i>
<i style="margin-left: 5px; color:#ff6f00; cursor:pointer;" class="material-icons"
#click="deativate(article.id)">clear</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Attached picture of the table coming out of the card
Try this way :
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">Card Title</span>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Item Quantity</th>
<th>Item Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>11232132131</td>
<td>Alvin</td>
<td>Eclair</td>
<td>Chocolate</td>
<td>5</td>
<td>$1.00</td>
<td>$5.00</td>
</tr>
<tr>
<td>24646546464</td>
<td>Alan</td>
<td>Jellybean</td>
<td>Chocolate</td>
<td>7</td>
<td>$5.00</td>
<td>$35.00</td>
</tr>
<tr>
<td>36798799797</td>
<td>Jonathan</td>
<td>Lollipop</td>
<td>Chocolate</td>
<td>5</td>
<td>$8.00</td>
<td>$40.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I caught a problem with a card-deck (3 cards) with bootstrap 4.
Everything looks great, but when you trie a landscape mode with your mobile, the buttons/links inside of each card are not resizing.
For sure, the link-titles are not the shortest, but it should work.
FIDDLE
<div class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/bm.jpg" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/pr.jpg" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/hfk.png" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
</div>
Thank you so much!
As explained in this GitHub thread, text in Bootstrap btn does not wrap which is by-design.
There are 2 workarounds. Add CSS to make the btn text wrap...
.btn {
white-space: normal;
}
Or, use text-truncate and mw-100 on the buttons to show the "..." when the card width narrows...
Mehr erfahren
https://www.codeply.com/go/IdLNh5uUfA
So using your html but with BS 4 links it seems to be working fine, everything seem to be resizing as expected.
Running this snippet in full screen and using the dev tools of Chrome browser in responsive mode when I resize the deck everything resizes appropriately
Even though it looks to be an issue with button whitespace I can see that the 3rd column button still exceeds the card. Maybe consider using viewport font sizing.
.btn {
white-space:normal !important;
font-size:1vw !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container">
<h1>Aktuelles</h1>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-events-tab" data-toggle="pill" href="#pills-events" role="tab" aria-controls="pills-events" aria-selected="false">Veranstaltungen</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-press-tab" data-toggle="pill" href="#pills-press" role="tab" aria-controls="pills-press" aria-selected="false">Presse</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
<div class="tab-pane fade" id="pills-events" role="tabpanel" aria-labelledby="pills-events-tab">
<h3>Beginn der Ausbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Ausbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">01.08.2018</th>
<td>Phyrapie,<br>Pharmah-technischer Assistent,
<br>Masseur und med. Bademeister,<br>Med.-techn. Asssistent für den OP-Dienst,<br>Sozialbetreuer</td>
</tr>
<tr>
<th scope="row">01.09.2018</th>
<td>Altenpflege (auch verkürzt),<br>Altenpflegehilfe</td>
</tr>
</tbody>
</table>
<br>
<h3>Beginn der Fort- und Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">31.08.2018</th>
<td>Berufsbegleitende Weiterbildung als<br> "Fachkraft für Krajh,bkjl.b kjgöl uigiu <br>ein späterer Einstieg ist möglich!</td>
</tr>
<tr>
<th scope="row">09.2018</th>
<td>Berufbegleitende Weiterbildung als "Pharmareferent"<br>jhlkhgljk</td>
</tr>
</tbody>
</table>
<br>
<h3>Physiotherapeutische Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Kurstermin</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">06.08. - 31.08.2018</th>
<td>Manuelle Lymphdrainage</td>
</tr>
<tr>
<th scope="row">10.09. - 16.09.2018</th>
<td>Wirbesäulenkurs für PT (W3)</td>
</tr>
<tr>
<th scope="row">09.11. - 11.11.2018</th>
<td>Einführungskurs "Osteopathie" (E0) für <br>Physiotherapeuten</td>
</tr>
<tr>
<th scope="row">12.11. - 18.11.2018</th>
<td>Extremitätenkurs für Ärzte und PT (E1+E2=Ä1)</td>
</tr>
<tr>
<th scope="row">07.12. - 09.12.2018</th>
<td>Kurs Extremitäten / Wirbelsäule E4/W4</td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="tab-pane fade" id="pills-press" role="tabpanel" aria-labelledby="pills-press-tab">
<h3>Presseberichte</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Zeitung/Datum</th>
<th scope="col">Thema</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Pressebericht "Deutscher Sportball" / 08.11.2014</th>
<td>Auf zwei Rädern<br>Juniorenweltmeisterin Doreen Heinze...</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 02.06.2013</th>
<td>Mit Herzblut<br>Die Entscheidung für eine Ausbildung...</td>
</tr>
<tr>
<th scope="row">TLZ Erfurt / 28.10.2010</th>
<td>Projekttag im Bildungswerk für Gesundheitsberufe - Das Alter und kleine Kniffe</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 11.03.2009</th>
<td>Offene Türen - Bildungswerk für Gesundheitsberufe lädt am Samstag ein</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 05.07.2006</th>
<td>Neuer Beruf: Medizinsch-technischer Assistent für den OP-Dienst</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>