I am currently running into an issue with JQuery UI tabs causing the browser to slow down a lot when I load a large table into a tab. I am running JQuery 1.4.2 and JQuery UI 1.8.4. Clicking anywhere within the tab with this large table causes the CPU to jump up to 50%. The slowness is more apparent if you have a column of checkboxes to click on. But it is also apparent when you attempt to highlight any text in the table.
So far I have tested the following:
1) JQuery UI tabs with a 500 row table.
2) JQuery UI tabs with 500 rows of data (replaced table with p and span tags).
3) Just a 500 row table
Case #1 is the slowest.
Case #2 is more responsive, but the table layout is now gone.
Case #3 is the fastest with no lag time at all.
I've tried using the FireBug profiler to see what could be executing, but it returned with no activity. At this point I am stumped.
Here is a code snippet for Case #1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tabs + 500 row table</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<link href="css/jquery-ui-1.8.custom.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>500 Rows</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<!-- Insert Large data table here. 500+ rows -->
<!--
Small sample starter table. Pasting a 500 row table here would be too much.
<table>
<tr>
<td><input type="checkbox"/></td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
<td>column 6</td>
</tr>
</table>
-->
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
I have managed to resolve this with a sort of "hack". I simply removed the ui-widget class from the tabs after loading the tabs and I no longer have high cpu usage with huge tables.
$("#tabs").removeClass("ui-widget");
I was able to safely remove this because this class adds very little to the actual style of the tabs other than setting the font type and size.
Could this be related to the bug mentioned here: http://bugs.jqueryui.com/ticket/6757
in the CSS change
.ui-widget :active {
outline: none;
}
to
.ui-widget:active {
outline: none;
}
Related
I want to create a basic admin panel with a side menu. It should look like this:
https://vuetifyjs.com/en/examples/layouts/baseline
I've got this so far:
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
name: 'BootstrapVue',
show: true
}
},
})
}
body {
padding-top: 57px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.0.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href="//unpkg.com/bootstrap-vue#2.0.2/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap#4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
<div>
<b-navbar variant="dark" type="dark" fixed="top">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
</b-navbar>
<b-container fluid>
<b-row>
<b-col cols="2" class="pl-0">
<b-nav vertical class="bg-light border-right position-fixed">
<b-nav-item>
This topic is way too long to be displayed correctly!
</b-nav-item>
</b-nav>
</b-col>
<b-col cols="10">
<b-card no-body style="border: none;">
<b-card-text>
<h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </h4>
<h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer
tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci
eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</h4>
</b-card-text>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</div>
My problem is that the text of a menu item overlaps the boundries of the column and goes behind the main content (router-view). The text should break when it reaches the end of the column.
Give a max-width to you b-nav "(100 / 12) * cols" in your case this is (100 / 12) * 2 = 16.667%
<b-col cols="2" class="pl-0">
<b-nav vertical class="bg-light border-right position-fixed" style="max-width=16.667%;">
<b-nav-item>
This topic is way too long to be displayed correctly!
</b-nav-item>
</b-nav>
</b-col>
I want to have a vertical stack of blocks; each block has an image on the left and text (heading and paragraphs) on the right.
I would like the image to be its natural width and the text to use the remaining width in the parent element.
This is similar to a table, but the images in different blocks have different widths. So the first "column" in the table is not of constant width.
Floating the image left does not work, because if the text has a greater height than the image, the text wraps underneath the image.
CSS tables don't seem to work, because the CSS does not know the differing image widths from block to block.
My "block" element CSS includes 'display: table-row;'. My image element and my text element CSS include 'display: table-cell;'. The result is that some images are their natural sizes; others are smaller than their natural sizes.
This seems to be related to the amount of text: one line of text gets a natural size image; two lines squeezes the image a few pixels; 15 lines squeezes the image to about one-half size.
I would welcome suggestions for how to accomplish my goal.
I think that can be resolved by display flex. Documentation W3C: https://www.w3schools.com/css/css3_flexbox.asp
Try this:
HTML
<div class="row" style="width: 100%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
<div class="row" style="width: 70%">
<img src="https://image.shutterstock.com/image-photo/salesman-holding-cutting-board-assorted-260nw-407934532.jpg"/>
<div>
<h2>Head</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus massa nec fermentum egestas. Sed feugiat, nisl vitae dictum accumsan, felis odio elementum eros, imperdiet faucibus mi nisi convallis dolor. Mauris interdum maximus neque, in convallis erat facilisis porttitor. Sed ac tortor imperdiet, efficitur nisi nec, efficitur massa. Integer consectetur nec nunc ac porta. Proin non ultricies lorem, rhoncus laoreet ligula. Donec condimentum mauris id urna placerat dapibus. Cras consequat, quam vitae semper luctus, mi tortor finibus augue, sed vestibulum odio lorem at tellus. Fusce eu urna eget ante mollis vestibulum. Nullam ante eros, convallis vitae hendrerit at, volutpat id dui.
</p>
</div>
</div>
<div class="row" style="width: 80%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
CSS:
.row {
display: flex;
}
.row img {
flex-grow: 1;
height: max-content;
}
.row div {
margin-left: 10px;
}
https://jsfiddle.net/ymuxdtg6/
I want to load a whole html file as testdata with liquibase. So far I've used the approach with loading testdata from csv file, but it is not designed to handle huge html's.
Is there a way to achieve it?
Here is an example to make it clear:
I have a table named Movie. The fields are: id, title, description. In a databaseChangeLog section I point to a file where I store the testdata:
<loadData encoding="UTF-8"
file="config/liquibase/testdata/movie.csv"
separator=";"
tableName="movie"/>
The content is as follows:
id;title;description
1;Titanic;great movie
2;Forrest Gump;another great movie
Now I want to change the description to something that is closer to the real usecase. Lets say this HTML:
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta pulvinar lacus eget egestas. Ut quis efficitur turpis. Nunc tincidunt turpis lorem, eget vestibulum nisi sodales at. Quisque in tortor et sapien ornare venenatis. Integer pulvinar nec ipsum malesuada porta. Sed massa metus, condimentum non varius ornare, sollicitudin at dui. Praesent porta, ante et interdum convallis, tellus augue tempus nisl, sit amet mollis augue nisl vel metus.
</p>
<p>
Nam quis libero rhoncus, facilisis magna ut, bibendum urna. Nullam sit amet volutpat turpis. Praesent eget aliquet orci. Duis dignissim tellus erat, eget fermentum augue dapibus sed. Quisque vitae est ipsum. Quisque sit amet libero eget nisi faucibus maximus vel a sem. Proin maximus neque arcu, sit amet eleifend dolor ornare at. Suspendisse laoreet lobortis tellus sed consequat. Nunc commodo ligula eget neque porta consectetur. Mauris sagittis elit in sodales luctus.
</p>
</div>
The content won't fit into the csv file. I could delete all the newlines, but it makes the file unmaintainable.
loadData has a column attribute which in turn has a valueClobFile attribute where you could put in a path to a (html) file.
Checkout these two files in the liquibase integration tests that show a use of this:
batchInsert.changelog.xml
batchInsert.csv
I'm generating a very basic PDF with header and footer like this:
<cfdocument format="PDF" pagetype="A4" unit="cm" scale="100">
<cfset template_stlye = fileRead(expandPath('love.css'))>
<cfdocumentitem type="header" evalatprint="true">
<cfif cfdocument.currentpagenumber eq 1>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_header">
<div class="header_text">
I'm a lovely header
</div>
</div>
</cfif>
</cfdocumentitem>
<cfdocumentitem type="footer" evalatprint="true">
<cfif cfdocument.currentpagenumber eq 1>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_footer">
<div class="footer_text">
I'm a lovely footer
</div>
</div>
</cfif>
</cfdocumentitem>
<style type="text/css" media="screen">
<cfoutput>
#template_stlye#
</cfoutput>
</style>
<div class="pdf_content">
<h1>Foo bar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum egestas lorem sed ultricies. Aliquam in orci eu massa semper tempor ac at nisi. Proin vestibulum dictum rhoncus. Mauris blandit congue auctor. Vestibulum sed fermentum nibh. Donec non nibh risus. Mauris vestibulum magna libero. Pellentesque vel lectus congue, eleifend sapien id, porttitor tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget imperdiet eros, in congue massa. Curabitur eget massa aliquam, rhoncus ipsum vitae, rhoncus felis. Integer a aliquet sapien. Donec lacinia sem sed turpis pellentesque ultrices.
</p>
<p>
Aenean eget magna sodales eros ullamcorper consectetur. Maecenas varius est ac rhoncus gravida. Donec posuere rhoncus massa nec suscipit. Nullam vestibulum nunc quis nisi pharetra dignissim. Maecenas lobortis placerat sapien porta cursus. Pellentesque aliquet a massa id sodales. Curabitur massa felis, pellentesque volutpat molestie vel, mollis sit amet purus. Donec faucibus felis ut neque tristique vulputate. Phasellus facilisis lectus ac vestibulum vulputate. Vivamus quis convallis nibh. Pellentesque commodo dolor et velit volutpat ultricies. Vestibulum pharetra at nulla a pulvinar. Donec non rhoncus justo. Sed tempus, tellus sed consequat dictum, est lectus ultrices ante, a sagittis urna eros non lorem. Fusce quis sagittis diam, quis sollicitudin leo. Nulla ut dolor iaculis, fermentum turpis eu, fringilla tellus.
</p>
</div>
</cfdocument>
The CSS file:
.pdf_content {
font-size: 11pt;
font-family: Arial, Tahoma;
}
.header_text, .footer_text {
font-size: 10pt;
font-family: Arial, Tahoma;
line-height: 9pt;
text-align: center;
}
.pdf_header, .pdf_footer {
position: absolute;
top: 0.5cm;
width: 18cm;
}
And I end up with the regular content in a wrong scale:
While it's supposed to look like this:
Any idea, why this is happening?
I'm working with:
Windows 10, Version 1511, Build 10586.164
Coldfusion 10.0.20.283922, Tomcat 7.0.68.0
After some debugging efforts and further comparison with a co-workers setup we found out that the included Java version is so old that it doesn't even know Windows 10.
Settings before:
After pointing ColdFusion the the most recent JDK it worked.
Settings after:
PS: "fun fact" when changing back to the included Java version the scaling issue wasn't reproducible anymore. wtf
I've used the previous version of Bootstrap and had no problem with this, but I'm trying with 3.0 and my classes just lie on top of each other rather than floating from keft to right, what am I doing wrong?
I followed this tutorial http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php and even copied it across as it was driving me insane, but it didn't even work.
This is my current HTML
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./css/global.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#emproium-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Branding</a>
</div>
<div class="collapse navbar-collapse" id="emproium-navbar-collapse">
<ul class="nav navbar-nav">
<li>Core Collection</li>
<li>Antiques</li>
<li>Art</li>
<li>Furniture</li>
<li class="dropdown">
Home Decor <b class="caret"></b>
<ul class="dropdown-menu">
<li>Rugs</li>
<li>Throws</li>
<li>Quilts</li>
<li>Accent Pillows</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Cart</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="banner span12">
</div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
<div class="tile span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
</div><!-- end of row-->
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
That's my full code, if anyone could point out what is wrong here i'd be grateful. I'm sure it's pretty simple.
Jonny
span* have been replaced by the col-xs|sm|md|lg-* naming convention. Just looking at your code, that is probably your main issue in migrating to BS3. See http://getbootstrap.com/getting-started/#migration for a full list of what has changed.