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
Related
In my user table, there is an active field, instead of true/false I want the checkbox to be highlighted (it does not matter) if true and a minus sign (not important) if false.
And when changing user data, I want to click on one of these checkboxes to set the value.
How can I give a tick instead of a value?
<!-- user.html -->
<div class="container" ng-app="app" ng-controller="DashboardCtrl">
<div class="row table-responsive">
<table class="simple-little-table">
<tr>
<th>id</th>
<th>Name</th>
<th>Lastname</th>
<th>Username</th>
<th>email</th>
<th>Role</th>
<th>Active</th>
</tr>
<tr ng-repeat="user in users | filter:$scope.query">
<td>{{ user.id}}</td>
<td>{{ user.firstName}}</td>
<td>{{ user.lastName}}</td>
<td>{{ user.username}}</td>
<td>{{ user.email}}</td>
<td>{{ user.roles}}</td>
<td>{{user.active}}</td>
<td><div>
<button class="btn btn-primary" ng-click="editUser(user.id)">Редактировать</button>
</div></td>
</tr>
</table>
</div>
</div>
that's edituser.html
<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
Активация:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
<textarea style="display: inline-block; width: 100%; height:3rem; resize: none;" ng-model="user.active"
ng-if="editActive"/>
<div ng-if="!editActive" style="display: inline-block; width: 100%; overflow-wrap: break-word">
{{user.active}}
</div>
</div>
<div class="col-lg-1 col-sm-1">
<button ng-click="changeActive()"
ng-if="editActive">
<i class="glyphicon glyphicon-ok"
style="size: 20px"/>
</button>
<button ng-click="changeActive()"
ng-if="!editActive">
<i class="glyphicon glyphicon-pencil"
style="size: 20px"/>
</button>
</div>
If I got your point,you want to show checkbox and minus sign depend active field and you also want to check or tick the check box to change the data.
<input type="checkbox" ng-if="user.active"
ng-checked="user.active" ng-click="editUser(user.id)">
display minus when active false.
<span ng-if="!user.active"> <i class="glyphicon glyphicon-minus"/></span>
<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
Активация:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
<input type="checkbox" ng-if="editActive"
ng-checked="user.active" ng-click="editUser(user.id)">
<input type="checkbox" ng-if="!editActive"
ng-checked="user.active" ng-click="editUser(user.id)">
<!--<input type="checkbox" ng-if="user.active"-->
<!--ng-checked="user.active" ng-click="editUser(user.id)">-->
</div>
<div class="col-lg-1 col-sm-1">
<button ng-click="changeActive()"
ng-if="editActive">
<i class="glyphicon glyphicon-ok"
style="size: 20px"/>
</button>
<button ng-click="changeActive()"
ng-if="!editActive">
<i class="glyphicon glyphicon-pencil"
style="size: 20px"/>
</button>
</div>
after edit, shows ticks but does not change the value
I want to and remove a tr when I click a button, but it doesn't disappear (my function to delete it from the DB works fine, it just stays in the screen until I refresh).
It's like it doesn't take the ID properly.
Any hints?
HTML
<tbody>
<?php foreach ($elementos as $elementos): ?>
<tr class="tr_test" data-id="<?php echo $elementos['ELDI_Id']; ?>">
...
AJAX
$.ajax({
url: $("#base_url").attr("valor") + "diccionarios/eliminar_elementos_diccionario",
type: 'POST',
data: { id:id_eldi },
success: function(response){
// THIS WORKS FINE, BUT I'M ASKED TO DO IT THE OTHER WAY
/* $(el).closest('tr').fadeOut(800, function(){
$(this).remove();
}); */
$('tr[data-id="' + id_eldi + '"]').fadeOut(800, function(){
$(this).remove();
});
}
});
Thanks for your time!
EDIT
Populated table's html, as asked in a comment:
<section class="content">
<div class="container-fluid">
<div class="block-header">
<div class="alert alert-info">
<strong>
Elementos del Diccionario 2 </strong>
<!-- <strong>
Elementos del Diccionario </strong> -->
</div>
</div>
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="body">
<!-- <div>
<a class="nav-link" href="http://localhost/bpg/diccionarios/nuevo_elemento_diccionario">Añadir elemento</a>
</div> -->
<!-- BOTÓN AÑADIR ELEMENTO MODAL -->
<a title="Añadir" style="margin-bottom:20px;" class="btn btn-primary" data-toggle="modal" data-target="#Modal_Add">
<i class="material-icons">add</i>Nuevo elemento
</a>
<div class="table-responsive">
<table id="tabla-elementos" class=" display table table-bordered table-striped table-hover tabla-usuarios">
<thead>
<tr>
<th>Key</th>
<th>Display</th>
<th>Acciones</th>
<!-- <th>Acciones</th> -->
</tr>
</thead>
<tbody>
<tr class="tr_test" data-id="347">
<td>prueba_1</td>
<td>Prueba Uno</td>
<td>
<span class="btn btn-default editar_elemento" id='347' value="347">
<a href="http://localhost/bpg/diccionarios/elemento_diccionario/347" title="Editar">
<i class="material-icons">edit</i>
</a>
</span>
<span class="btn btn-default borrar_elemento" id='347' value="347">
<i class="material-icons">delete_outline</i>
</span>
</td>
</tr>
<tr class="tr_test" data-id="348">
<td>prueba_2</td>
<td>Prueba Dos</td>
<td>
<span class="btn btn-default editar_elemento" id='348' value="348">
<a href="http://localhost/bpg/diccionarios/elemento_diccionario/348" title="Editar">
<i class="material-icons">edit</i>
</a>
</span>
<span class="btn btn-default borrar_elemento" id='348' value="348">
<i class="material-icons">delete_outline</i>
</span>
</td>
</tr>
<tr class="tr_test" data-id="351">
<td>prueba_3</td>
<td>Prueba Tres</td>
<td>
<span class="btn btn-default editar_elemento" id='351' value="351">
<a href="http://localhost/bpg/diccionarios/elemento_diccionario/351" title="Editar">
<i class="material-icons">edit</i>
</a>
</span>
<span class="btn btn-default borrar_elemento" id='351' value="351">
<i class="material-icons">delete_outline</i>
</span>
</td>
</tr>
<tr class="tr_test" data-id="353">
<td>prueba_4</td>
<td>Prueba Cuatro</td>
<td>
<span class="btn btn-default editar_elemento" id='353' value="353">
<a href="http://localhost/bpg/diccionarios/elemento_diccionario/353" title="Editar">
<i class="material-icons">edit</i>
</a>
</span>
<span class="btn btn-default borrar_elemento" id='353' value="353">
<i class="material-icons">delete_outline</i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
Volver a Diccionarios
</div>
</div>
</div>
</div>
</div>
I'm not sure if it's the cause of your problem, but your HTML/PHP is incorrect, it should read:
<tbody>
<?php foreach ($elementos as $elemento): ?>
<tr class="tr_test" data-id="<?php echo $elemento['ELDI_Id']; ?>">
...
try add it's table parent as identifier:
$('button#btn').on('click', function() {
$('table#table tr[data-id="1"]').fadeOut(800, function(){
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr data-id="1">
<td>row</td>
</tr>
</tbody>
</table>
<button type="button" id="btn">
remove
</button>
only using tr[data-id=""] might be too broad for the DOM to find that element.
SOLUTION FOUND
I wasn't assigning data-id to the new appended rows.
JQUERY/AJAX
Fade and remove the tr:
$("tr[data-id-fila="+theID+"]").fadeOut(800, function(){
$(this).remove();
});
New appended row (AJAX gets result from model and controller using insert_id())
var html =
'<tr data-id-fila="' + result.newID +'">'+
..............
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>
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!
What is this white space(marked as what in above image) below the modal-footer? Tried inspecting the element but chrome doesn't show anything. Want to remove this white space. I'm using Bootstrap 3.
website: Link
Html:
<link rel="stylesheet" href="/static/css/bootstrap_3.2.css">
<div id="shoppingModal2" class="modal in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-left: 30%; overflow-x: hidden; margin-top: 3%; display: block;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Your Shopping Cart</h3>
</div>
<div class="modal-body shopping_cart_body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr><td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;"></td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong></td>
<td class="active"> $
<span class="price_row"> 15.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;"></td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;"></td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<span class="pull-left"> Total Price: </span> <span class="pull-left" id="total_price">Rs. 10430</span>
<button class="btn btn-primary">Proceed to Buy <i class="icon-chevron-right icon-white"></i> </button>
</div>
</div>
I think you've got something wrong with the modal script or structure. Try to re-arrange everything from the start again!
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shoppingModal2">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="shoppingModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Your Shopping Cart</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr>
<td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;">
</td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong>
</td>
<td class="active">$ <span class="price_row"> 15.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;">
</td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;">
</td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Proceed to buy <i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
Here is a DEMO