I have a responsive table and a button, now I want to make them align right so I do this:
<div class="container-fluid" id="main">
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br>
<div class="table-responsive">
<table class="table table-striped">
<!-- table -->
</table>
</div>
</div>
I add pull-right to the button and the page looks like this:
How can I make the button and table align right properly?
As you can see from the example pull-right class should be working. You might have some problem with padding-right on the parent div of the table, or maybe some col-sm-11 class?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid" id="main">
</br></br>
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br></br>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</div>
</div>
use col-sm-offset.
<div class="container-fluid col-sm-offset-2" id="main">
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br>
<div class="table-responsive">
<table class="table table-striped">
<!-- table -->
</table>
</div>
</div>
By default,td items aligned to left so override it.
#main table tr td:last-child{
text-align: right !important;
}
Related
I have got a modal and inside the modal content I have got a table and a div section to show some information about the table. I would like to position the div section next to the right bottom of the table. I tried setting the div to fixed position and then giving it bottom zero but that will result in placing the div in the footer of the modal. How can I add The div next to bottom right of the table. I don't mind in smaller screen size for the div to be at the right bottom of the table where the table takes the full width. attached Image is what I would like to achieve.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-10">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Type</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-2">
<div>
<div class="form-group">
<label id="">Total Cost</label>
<label id="">10</label>
</div>
<div class="form-group">
<label id="">Balance</label>
<label id="">5</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I have used class "align-self-end" which is a predefined class available in bootstrap 4. Below is the fix.
Please check this result in full view mode.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-9">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Type</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example1</td>
<td>Example1</td>
<td>Example1</td>
<td>Example1</td>
</tr>
<tr>
<td>Example2</td>
<td>Example2</td>
<td>Example2</td>
<td>Example2</td>
</tr>
<tr>
<td>Example3</td>
<td>Example3</td>
<td>Example3</td>
<td>Example3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-2 align-self-end">
<div>
<div class="form-group">
<label id="">Total Cost</label>
<label id="">10</label>
</div>
<div class="form-group">
<label id="">Balance</label>
<label id="">5</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I have a table that is supposed to represent a CRUD application in which there is a person's details as well as an edit and delete button. The two buttons (as well as any other buttons that may be added later) are intended to display side by side of each other. This works on larger screen sizes, however on smaller devices, the buttons stack on top of each other.
How do I make it so that the buttons remain to the side of each other on smaller screen sizes?
<head>
<!--Material Icons -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body class="bg-light">
<!-- Main body -->
<div class="container">
<!-- Table -->
<div class="table-responsive">
<table class="table table-fit mt-5 table-dark table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>myFirstName</td>
<td>myLastName</td>
<td>#myHandle</td>
<td>
<a type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</a>
<a type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>anotherFirstName</td>
<td>anotherLastName</td>
<td>#anotherHandle</td>
<td>
<a type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</a>
<a type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
The issue has been solved by putting both buttons inside of a flex container
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Material Icons -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body class="bg-light">
<!-- Main body -->
<div class="container">
<!-- Table -->
<div class="table-responsive" >
<table class="table table-fit mt-5 table-dark table-striped" >
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>myFirstName</td>
<td>myLastName</td>
<td>#myHandle</td>
<td >
<div class="d-flex flex-row mb-3">
<div ><button type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</button></div>
<div ><button type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</button></div>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>anotherFirstName</td>
<td>anotherLastName</td>
<td>#anotherHandle</td>
<td >
<div class="d-flex flex-row mb-3">
<div ><button type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</button></div>
<div ><button type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</button></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
That's a really painful situation every developer faced during such use cases.
Nevertheless, there are a couple of solutions (I would say UX ) you should consider:
If there is a high chance of increasing action buttons, you can simply group them all and add more buttons to display the list of action items:
Refer the screenshot
If you don't want to go with option 1., you can choose to convert your table into an accordion after specific breakpoints where the user can see the full name and all the action items or make it a card-based layout to display all the records.
Display all the action items on the hover of the row. All the action items would be slide/fade from/on the right side on top of the row. Similar to Gmail.
I want to inline column icon with column table that responsive. My problem is the second column auto break to new line. whereas i already use a responsive table that will scroll-x if out from width parent. But, the second column auto break to new line. I don't want that. I puts a comment for fast investigating.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- Variabel col depedent content -->
<div class="col-auto">
<span>Iconaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<!-- Auto fill left col -->
<div class="col">
<div class="table-responsive">
<table class="table table-sm table-bordered table-striped table-primary">
<thead>
<tr>
<th width="1%">No</th>
<th width="7%">Pengirim</th>
<th>Pesan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>0123456789012</td>
<td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
You have to add flex-nowrap to force the element on the same line. You may also need min-width:0 on the col where the table is.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
<div class="row flex-nowrap">
<!-- Variabel col depedent content -->
<div class="col-auto">
<span>Iconaaaaaaaaaaaa</span>
</div>
<!-- Auto fill left col -->
<div class="col" style="min-width:0;">
<div class="table-responsive">
<table class="table table-sm table-bordered table-striped table-primary">
<thead>
<tr>
<th width="1%">No</th>
<th width="7%">Pengirim</th>
<th>Pesan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>0123456789012</td>
<td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Or add overflow-auto which will do the same job and you keep using only bootstrap classes:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
<div class="row flex-nowrap">
<!-- Variabel col depedent content -->
<div class="col-auto">
<span>Iconaaaaaaaaaaaa</span>
</div>
<!-- Auto fill left col -->
<div class="col overflow-auto" >
<div class="table-responsive">
<table class="table table-sm table-bordered table-striped table-primary">
<thead>
<tr>
<th width="1%">No</th>
<th width="7%">Pengirim</th>
<th>Pesan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>0123456789012</td>
<td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Related: Why don't flex items shrink past content size?
Please use word-break: break-word;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
<div class="row flex-nowrap">
<!-- Variabel col depedent content -->
<div class="col-auto">
<span>Iconaaaaaaaaaaaa</span>
</div>
<!-- Auto fill left col -->
<div class="col" style="min-width:0;word-break: break-word;">
<div class="table-responsive">
<table class="table table-sm table-bordered table-striped table-primary">
<thead>
<tr>
<th width="1%">No</th>
<th width="7%">Pengirim</th>
<th>Pesan</th>
<th>Tanggal</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>0123456789012</td>
<td>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
<td>#mdo</td>
</tr>
<tr>
<th>2</th>
<td>9876543210321</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I have the following table:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-responsive">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pedro</td>
<td>mk-567</td>
<td>
<div class="btn btn-group">
<button type="button" class="btn btn-default btn-xs">
<i class="fa fa-search"></i>
</button>
<button type="button" class="btn btn-default btn-xs">
<i class="fa fa-trash-o"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
As you can see, col4 has way to much width, I tried to set width:auto but it does not work and if I manually set the width, when I change my page resolution it looks bad, really bad. I tried to set to width: 1px but the buttons do not wrap each other.
There is a way to "auto width" the column to the buttons?
You dont need use "button-group" in table. Table is already working on row-col system. Just put buttons in same row.
.container {
padding: 2rem 0rem;
}
h4 {
margin: 2rem 0rem 1rem;
}
.table-image {
td,
th {
vertical-align: middle;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Shares</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>2.846</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>3.417</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.234</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I am trying to create a page using twitter bootstrap.
My problem is font awesome icons are not working everywhere.As you can see in code i provided,in button amazon and cart icons displaying properly but dollar icon is not being displayed.Similarly Android icon working but battery and camera icons not working.What i am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<div class="card-body">
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Samsung galaxy note 8</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2">
<button type="button" class="btn btn-lg btn-outline-secondary amazon"><i class="fa fa-amazon"></i><a href="" > Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary"><i class="fa fa-dollar-sign"></i> 400</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay"><i class="fa fa-shopping-cart"></i> Ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary">500</button>
</div>
</div>
</div>
</div>
<div class="spec">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th><i class="fa fa-android"></i> OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32/64GB<br>
Expandable: Yes(128GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4GB</td>
</tr>
<tr>
<th><i class="fa fa-battery-bolt"></i> Battery & SIM</th>
<td>Dual Sim(1 nano and 1 micro)4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th><i class="fa fa-camera-alt"></i> Camera</th>
<td>Rear:13MP (CMOS Camera,f2.0 Aperature)<br>
Front: 5MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi)IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
There is a 'pro license' required for certain icons in font awesome. Try using fa-bolt and fa-camera instead. Also you can check icon reference at font awesome's website and see which icons are free and which require license.
Fa-Dollar-Sign is with new latest pack, if you have old pack, dollar sign is fa-usd. It is pointed out on their website.