Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
Related
I want to use bootstrap data-toggle="table", but when I enable it, it starts to render all content in <td> as plain text (ignoring tags).
My code looks like this
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.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'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>
Everything works as usual, when I remove data-toggle="table"
Here you go. Just added "data-escape="false"" in table definition.
https://codepen.io/shubham-sharma-the-looper/pen/KKaMWGL
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.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'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true" data-escape="false">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>
I see html when I run your code not a plain text.
I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.
Hello some pleeeease help me with this. I am new to angular. I want to apply both controllers to my table. These two controllers are created under different modules. The module is from npm install. it is named angular-table-resize. Here is the code below. the table resize feature seems not working
Controller
var app = angular.module('myApp', ['ngTableResize']);
app.controller('AppCtrl', ['$scope',function($scope) {
$scope.resizeMode = "FixedResizer";
}]);
var app2 = angular.module('myApp2', []);
app2.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
$scope.num = -1;
$http.get('/enodeb').success(function(response){
$scope.ue = response;
});
}]);
html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="node_modules/angular-table-resize/dist/angular-table-resize.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-table="tableParams" class="container" ng-Controller="AppCtrl" style="margin-left:180px">
<h1>ERIS/BUDS Mismatches</h1>
<table resizeable mode="resizeMode" class="table draggable sortable" id="myTable">
<thead>
<tr>
<th id="colName1"><a>EnodeB</a></th>
<th id="colName2"><a>Product(BUDS)</a></th>
<th id="colName3"><a>SerialNum(BUDS)</a></th>
<th id="colName4"><a>Bams-ID(BUDS)</a></th>
<th id="colName5"><a>Product(ERIS)</a></th>
<th id="colName6"><a>SerialNum(ERIS)</a></th>
<th id="colName7"><a>Bams-ID(ERIS)</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "device in ue">
<td>{{device.enodeBname}}</td>
<td>{{device.productnum_buds}}</td>
<td>{{device.serialnum_buds}}</td>
<td>{{device.bamsid_buds}}</td>
<td>{{device.productnum_eris}}</td>
<td>{{device.serialnum_eris}}</td>
<td>{{device.bamsid_eris}}</td>
</tr>
</tbody>
</table>
</div>
<script src="angular-table-resize.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controller/controller.js"></script>
<script src="dragtable.js"></script>
<script src="sorttable.js"></script>
</body>
You can't declare two controllers on one html element, but what you can do is apply a one controller to a parent element and one to a child, like this:
<div ng-controller="AppCtrl">
<table ng-controller="AppCtrl2">
<!-- both AppCtrl's and AppCtrl2's scopes are available here -->
</table>
</div>
Mind that in your current code you've defined your main myApp module and then some other myApp2 module, but didn't set myApp2 as the main module's dependency. You need to do either do that:
var app = angular.module('myApp', ['ngTableResize', 'myApp2']);
or just define both controllers on the same module:
angular.module('myApp')
.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
/* ... */
});
I'm new in HTML and I'm trying to use bootstrap in my project.
The problem is that I can't load bootstrap.min.css and none of the classes work. I did some searching and tried some ways but they didn't work for me
Here is my code :
<!DOCTYPE html>
%{--<!doctype html>--}%
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
%{--<link href="bootstrap.min.css" rel="stylesheet" media="screen">--}%
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
</html>
Using absolute path results in an error(use f12): Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css
I read somewhere that it's only chrome's error and Edge or IE browsers don't have this problem, they don't but the results are the same, css classes are not applied.
I put the bootstrap.min.css under the same directory as my html page is and used <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> instead of what is used in the code.
but this time I got error 404: not found
This seems to be my problem with the path I've given...but I don't know what to do
Any idea what's wrong with it?
The slash used here
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
would cause user browser to access the file from his filesystem.
Change the path
<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
UPDATED ANSWER :
Resource not found Error and what about resources plugin
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
its work check your css path
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
href replace with src
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
I have included necessary files required for Footable sorting , but columns dont have an option to sort the column values , any help would be of great help .
Code :
<!DOCTYPE html>
<html>
<head>
<title> Sorting Html Table Using FooTable </title>
<link rel="stylesheet" href="css/footable.core.css">
<link rel="stylesheet" href="css/footable.metro.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/footable.js"></script>
<script src="js/footable.sort.js"></script>
</head>
<body>
<table class="footable" >
<thead >
<!-- data-type = data type in the column -->
<!-- data-sort-ignore = disable sorting for the column -->
<!-- data-sort-initial = sort the column when the FooTable is initialized -->
<tr>
<th >Name</th>
<th ">Mark1</th>
<th ">Mark2</th>
<th " >Total</th>
</tr>
</thead >
<tbody >
<!-- populate table from mysql database -->
<?php while($row1 = mysqli_fetch_array($result)):;?>
<tr>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo $row1[3];?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.footable').footable();
});
</script>
</html>
Added the following bootstrap and jquery links to html file which solved my issue on sorting , now i can sort them :
<link data-require="bootstrap-css#3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="footable.core.css" />
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script data-require="bootstrap#*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>