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.
Related
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 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;
}
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.
I have the following HTML:
<!DOCTYPE html>
<head>
<title></title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
<div class="col-md-12" align="center" style="height:100%">
<a href="{% url 'home' %}">
<img style="margin-top: 20px;"
class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}"
width="180" height="180" alt="">
</a>
<br>
<section id="hi">
<div class="container animated fadeInUp" align="center">
<h2 style="color:#45b29a;" align="center">Hi.</h2>
<p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
</div>
</section>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<br><br><br><br><br><br><br><br>
<section>
<div>
<h1 style="color:#45b29a;" align="center">What I can do.</h1>
<br><br>
<table>
<tr>
<td align="right" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/design.gif' %}"
width="200" height="200" alt=""></a>
</td>
<td align="center" width="50%"><h3>Design what you want.</h3><br>
<p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
</td>
</tr>
<tr>
<td align="center" width="50%"><h3>Develop what you need.</h3><br>
<p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
</td>
<td align="left" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/develop.gif' %}"
width="100" height="100" alt=""></a>
</td>
</tr>
</table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
<a href="{% url 'academics' %}"> Read more about gentle
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12" align="right" style="margin-top: 6px;">
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</footer>
</html>
And my CSS:
.more_about {
background-color: red;
}
Please ignore all the classes i mentioned in my HTML, because my CSS doesn't have those classes. But i dont know why when i load the page instead of the div where i mentioned my class, the entire page getting background red. Any idea why guys? Thanks in advance.
Please correct the following mistakes in your code and it will fix the issue
1) You have closed your body tag before that div having class more_about
Body tag should always be closed in the end below the footer.
2) You need to add div with class clearfix as shown below just before your div with class .more_about to clear all the float applied to the upper divs.
<div class="clearfix"></div> <!-- this will clear all the floats -->
<div align="center" class="more_about">
<a href="{% url 'academics' %}"> Read more about gentle
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
I think this what you expected,just you need to add float:left
.more_about{
background-color: red;
float:left;
}