I am trying to create webpage from twitter bootstrap.I used card and table properties there.Problem im getting here is my table is displaying below card.I tried adding float-right float-left classes but that is not working.i want card to float left and table on right side on large screens and both responsive on small screen.Any idea how can i do it?
<!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">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="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">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (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>
<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>
Edited your html code .you have put both card and table col-md-4.
I have changed it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<div class="container">
<div class="row">
<div class="col-md-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="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">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
</div>
<div class="col-md-4">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (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>
Please use this code it's works for me, this fully responsive :
<!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-xs-12 col-sm-12 col-md-4 col-lg-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name"
style="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">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header">
<i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon">
<a href="" style="text-decoration: none;">
<i class="fa fa-amazon" style="color: #0E0B16;"></i>
Amazon</a>
</button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" style="text-decoration: none;">
<img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay </button>
<button type="button" class="btn btn-lg btn-outline-secondary flab">
500
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB
<br> Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE
<br> 4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td>
<span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)
<br>
<span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (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>
<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>
Related
I tried to show added product details after i clicked shopping cart icon or if i added any one product same like https://designmodo.com/shopping-cart-ui/. Initially no need to show the" Your Cart Items" added product box.I do not know how to do like that.If any one know please help to find the solutions.
addtocart-dir.ts:
<div class="card text-center">
<div class="card-header">
Your Cart Items
<button type="button" class="btn btn-sm btn-warning float-right">
Total items <span class="badge badge-light">{{cart.cartItemsList.length}}</span>
</button>
<button type="button" class="btn btn-sm btn-danger mr-2 float-right" (click)="emptyCart()" *ngIf="cart.cartItemsList && cart.cartTotal">
Empty Cart
</button>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr *ngFor="let itm of cart.cartItemsList ">
<td class="text-left">{{itm.name}}</td>
<td>{{itm.price/itm.qty}} x</td>
<td class="w30">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-info" type="button" (click)="changeQty(itm.pid,1,'')">+</button>
</div>
<input type="text" class="form-control text-center" value="{{itm.qty}}" #qtyRef (keyup)="changeQty(itm.pid,qtyRef.value,'replace')" >
<div class="input-group-append">
<button class="btn btn-danger" type="button" (click)="changeQty(itm.pid,-1,'')">-</button>
</div>
</div>
</td>
<td>{{itm.price}}</td>
</tr>
</tbody>
</table>
<a routerLink = "/billing" class="btn btn-sm btn-primary" *ngIf="cart.cartItemsList && cart.cartTotal">Checkout</a>
</div>
<div class="card-footer text-muted font-weight-bold">
Total : Rs. {{cart.cartTotal}}
</div>
</div>
Demo: https://stackblitz.com/edit/angular-selvam-ecommerce-task-btjqde?file=src%2Fapp%2Fdirectives%2Faddtocart.dir.ts
Change in cart.service.ts
public cartItemsList: any = [];
change in products.pages.ts
<div class="row">
<div [ngClass]="cart.cartItemsList.length == 0 ? 'col-md-12' : 'col-md-7'">
<productslist-dir (refresh)="ref($event)" [allProductList]="products.data [searchedText]="searchText" [sortingBy]="sortOption"></productslist-dir>
</div>
<div class="col-md-5" *ngIf="cart.cartItemsList.length > 0">
<cart></cart>
</div>
change in productslist.dir.ts
ngOnInit(){
this.sortByOption = 'product_name';
this.cart.allItems = this.__allprdts;
this.cart.storeItems();
}
addToCart(productId,productQty){
this.cart.addToCart(productId,productQty,'');
this.refresh.emit(true);
}
please check and let me know..
how to set a button sit next to a table within a div.
my code is:
<div class="col-xs-6"> <!-- main div -->
<div> <!-- table div -->
<table class="table table-bordered table-striped text-center">
<thead><tr>
<!-- 4 Header -->
</tr></thead>
<tbody> <tr><td>
<!-- first row -->
</td></tr></tbody>
</table>
</div>
<div class="col-xs-4">
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
-- main div close
what i am getting is:
put the main div to class: col-xs-12
and button div to col-xs-8 or col-xs-10.
So, main is total 12 in which you are putting the Table with *-xs-2 and button with *-xs-8
Try this
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-xs-4">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
</div>
</div>
</div>
Check this out: https://jsfiddle.net/hbp71ejr/
With the new Bootstrap 4 it's not possible anymore to simply apply classes like col-md-2 to the or the tags of a table.
So the solution seems to use class="d-flex" in the parent :
<tr class="d-flex">
but when I do it my whole table don't fit anymore in the parent div. And I can not do anything against it.
Can somebody help me to get the clue?
Here is the code of the table:
<div class="card-body">
<h3 class="col-12 mt-2">Lehrer</h3>
<table class="table table-light">
<tbody>
<tr class="d-flex">
<td class="col-md-1">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
<tr class="d-flex">
<td class="col-md-1">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-4"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
If you want the table cells to fill the width, use 12 columns units...
<tr class="row mx-0">
<td class="col-md-2">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-6"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
Or, use ml-auto to push the columns to the right..
<tr class="row mx-0">
<td class="col-md-2">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1 ml-auto">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
https://www.codeply.com/go/xRodoKUKBf
first of all: I know a similar question was already asked, several times. I read and tried the suggested solutions and they work in favor of the error message of my IDE.
But if I add the style to the header -like solutions suggest-, it will no longer work for my bootstrap button.
<style>.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}</style>
If I inline the code it works.
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#myModal" data-th-id="${person.getId()}" style="outline:none;box-shadow:none;">
If I add the style to the body, it also applies the effect I want.
So I am interested how to make this W3C conform and working without inlining it.
This is how it works but complaining IDE
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<!-- start header -->
<!-- Fixed navbar -->
<div th:replace="template :: navbar"></div>
<!-- end header -->
<!--- start table -->
<div class="container">
<div>
<style>.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}</style>
</div>
<br>
<h3>Overview</h3>
<br>
<div class="container">
<div class="col-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<!--/*#thymesVar id="productList" type="java.util.List"*/-->
<tr th:id="${person.getId()}" th:each="person : ${elementList}">
<td th:text="${person.getName()}" class="username"></td>
<!--/*#thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
<td th:text="${person.getAge()}" class="age"></td>
<!--/*#thymesVar id="getTop" type="java.lang.Double"*/-->
<td th:text="${person.getId()} " class="id"></td>
<td>
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary" type="button" id="addElement">Add Element</button>
<button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
</div>
</div>
When I shrink the web page, input box does show its value. input tag's value does not show when it is in small device.The full code is below. It is a basic table having 3 rows.
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<div class="table-responsive hidden-xs">
<table class="table table-hover">
<thead>
<tr>
<th>Ürün</th>
<th>Adet</th>
<th class="text-center">Toplam</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-8">
<div class="media">
<a class="img-thumbnail pull-left" href="#"><img class="media-object img-product-cart" src="~/Content/images/kitap/kitap2.jpg" /></a>
<div class="media-body">
<h4 class="media-heading">Matematik</h4>
<h5 class="media-heading">Yazar: Halil Kan</h5>
<h5 class="media-heading">ISBN: 1234567897</h5>
<h5 class="media-heading"><strong>Adet Fiyatı: 45.23 TL</strong></h5>
<span>Durum:</span><span class="text-success"><strong>Stokta 10 adet var.</strong></span>
</div>
</div>
</td>
<td class="col-sm-2 col-md-2">
<input type="text" class="form-control" value="3"/>
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>135.36 TL</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Kaldır
</button>
</td>
</tr>
<tr>
<td class="col-sm-8 col-md-8"> </td>
<td class="col-sm-1 col-md-1"> </td>
<td class="col-sm-1 col-md-1"><h4>Kargo Ücreti</h4><h3>Toplam</h3></td>
<td class="col-sm-1 col-md-1 text-right"><h5><strong>3.99 TL</strong></h5><h3>123.12 TL</h3></td>
</tr>
<tr>
<td class="col-sm-8 col-md-8"> </td>
<td class="col-sm-1 col-md-1"> </td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Alişverişe Devam
</button>
</td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-success">
Ödeme Sayfasına Geç <span class="glyphicon glyphicon-play"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Bootply link seems to work fine for small devices.
according to defination
Extra small devices Phones (<768px) - .col-xs-
Small devices Tablets (≥768px) - .col-sm-
Medium devices Desktops (≥992px) - .col-md-
Large devices Desktops (≥1200px) - .col-lg-
So it works fine for device size Small devices Tablets (≥768px) - .col-sm-
hope this helps!