I have a code like this:
http://jsfiddle.net/nf0z3pk3/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body style="height:100%;">
<div style="height:100%;" data-interval="false" data-ride="carousel" class="carousel slide" id="next">
<div class="carousel-inner">
<div class="item active">
<table border=1 style="width:100%; margin-left: auto; margin-right: auto; margin-top:5%" id="activitiesByMonthTable" class="">
<thead>
<tr>
<th>Month</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr id="row" class="reportRow">
<td>March</td>
<td>1</td>
</tr>
<tr id="row" class="reportRow">
<td>April</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae egestas purus. </p>
<p><a role="button" href="#" class="btn btn-lg btn-primary">Learn more</a></p>
</div>
</div>
</div>
Refer to jsfiddle link. Now, it works well with one problem. When you click next or previous button it slides to the other div. When you try to come back to the first slide, it comes back to the table but it does not come back to the table sliding. It just looks like it reloads a page. First the table is invisible, then it is visible back. I think it recreates the table. Any help is appreciated.
Related
I've put a carousel in my project and it works perfectly.(THANK GOD!!) I'm trying to put a table right after my carousel but when I go check in the live mode or the "google chrome view" it appears under my carousel. Can you help me fix that :)
Here's a part of my coding, the part missing is the pictures and the empty caption.
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/Cpnstruction_BS.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="3">
<tbody>
<tr>
<td colspan="4"><h3>514 415-6969</h3></td>
</tr>
<tr>
<td width="15%"><img src="Logo_BS.png" width="165" height="120" alt=""/></td>
<td width="77%"><h2>Des travaux Biens Structurés</h2></td>
<td width="8%"><div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="Menu.png" width="46" height="45" alt=""/></button>
<div class="dropdown-menu">
Construction BS</br>
Services</br>
Réalisations</br>
Contact
</div>
</td>
</tr> </tbody></table><table width="100%" border="3">
<tbody>
<tr>
<td><h3><marquee scrollamount="6"">Construction BS surveille de près l’information diffusée sur la COVID-19 et met à jour ses protocoles de prévention en conséquence. Pour en savoir davantage sur la COVID-19, consultez la trousse d’information générale fournie par le gouvernement du Québec. </marquee></h3>
</tr>
</tbody>
</table>
<secton id="one" class="container-fluid">
<!--BEGIN CAROUSEL-->
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="Berri.png" alt="placeholder" width="1528" height="850" class="center">
</div>
<div class="item"> <img src="bathroom-3346387_1920.jpg" width="1267" height="850" alt="placeholder">
<div class="carousel-caption">
</div>
</div>
<div class="item"><img src="Cuisine.png" width="1270" height="850" alt="placeholder">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a></div>
</secton>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></div>
<table width="100%" border="3">
<tbody>
<tr>
<td><p>514 415-6969 │ Info"constructionbs.com</br>
R.B.Q.:5791-7574-01</p></td>
<td><img src="ACQ.png" width="145" height="60" alt=""/><img src="AECQ.png" width="146" height="60" alt=""/>
<img src="Certifie.png" width="69" height="60" alt=""/></td>
<td><h4>Construction BS© 2020</h4></td>
</tr>
</tbody>
</table>
</body>
I put this specific code into codepen, and it displays correctly and looks great, but when i export the file and open it up through local chrome browser it does not work properly. The static headline keeps displaying below the carousel instead of in the carousal, here is the code im using.
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #FFF;
}
.carousel-caption {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Depot Sqaure</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/class" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/mainimg01.png" alt="First slide">
<div class="carousel-caption">
<h3>
Your elegant and affordable destination</h3>
<p>
for family, business, and community events.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
</body>
</html>
I can't visualise two column in a row. Do you know why?
I make the container, the row and then two columns-md-4 each with <h3>, <p> and a <table>. When I load the page on browser I can't see it well formatted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random App </title>
<meta name="description" content="Random App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<style>
body{
padding-top: 40px
}
</style>
<body>
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
<li>Gallery
<li>Feature
<li>Contact
</ul>
</div> <!--End container-->
</nav> <!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div><!--End Container-->
</div><!--End jumbotron-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</div>
</div><!--End Row-->
</div><!--End Container>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Tons of missing closing tags
You didn't properly closed your tags. Both <div>s with the col-md-4 classes were missing a closing tag right after your </tbody> tag.
You also miss a closing </div> for your <div class="container"> in your <nav>, not to mention that all of your <li>s miss their closing </li>s in your Navbar Header code block.
What you should have done
You would have noticed this if you had had proper indentation or had used an IDE with start-end tag highlighting.
Cmon, even Stack Overflow's snippet tool would give a warning, if you had taken the effort to create a snippet and press the tidy button.
See the red closing tag? That means you have an error:
This is not how a list should look like after a tidy:
The proper code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random App</title>
<meta name="description" content="Random App">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<style>
body {
padding-top: 40px
}
</style>
<body>
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div>
<!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
</li>
<li>Gallery
</li>
<li>Feature
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<!--End container-->
</nav>
<!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div>
<!--End Container-->
</div>
<!--End jumbotron-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--End Row-->
</div>
<!--End Container>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Try this https://jsfiddle.net/2Lzo9vfc/33/
HTML
<!--Navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Random
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feed
<li>Gallery
<li>Feature
<li>Contact
</ul>
</div> <!--End container-->
</nav> <!--End nav-->
<!--jumbotron-->
<div class="jumbotron">
<div class="container text-center">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor, erat quis suscipit auctor, justo lacus eleifend</p>
</div><!--End Container-->
</div><!--End jumbotron-->
<div class="row">
<div class="col-md-4">
<h3>Table A</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<h3>Table B</h3>
<p> Lorem ipsum Lorem ipsum Lorem ipsum</p>
<blockquote>
<footer>ujuyj</footer>
</blockquote>
<table class="table table-hover">
<thead>
<tr class="success">
<th>Name</th>
<th>Website</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
<tr>
<td>UnoCento</td>
<td>www.example.test</td>
<td>TreCento</td>
</tr>
</tbody>
</table>
</div>
</div><!--End Row-->
</div>
This is what my table looks like right now:
I want the checkbox to be on the right of "CMPT 310" instead of below it. I can't simply make the text a label for the checkbox because when I click on the text I want a description of the course to pop up (ie I don't want to checkbox to be checked). Here is how I'm implementing the problem cell in the table right now (using bootstrap):
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
And here is the rest of the page for reference:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="images/title.png" class="img-responsive"></div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong></td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong></td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Set the p and checkbox inside the td element to be displayed inline.
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
td p,
td .checkbox {
display: inline;
}
td .checkbox {
margin-left: 5px;
margin-top: 0;
position: absolute;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="images/title.png" class="img-responsive">
</div>
</div>
<div class="row">
<h4><strong>Table I: Computing Science Concentrations<strong></h4>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Artificial Intelligence</th>
<th>Computer Graphics</th>
<th>Computing Systems</th>
<th>Information Systems</th>
<th>Programming Languages and Software</th>
<th>Theoretical Computing Science</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p data-toggle="modal" data-target="#CMPT310">CMPT 310</p>
<div class="checkbox">
<label>
<input type="checkbox" value="">
</div>
</td>
<td>CMPT 361</td>
<td><strong>CMPT 300</strong>
</td>
<td>CMPT 301</td>
<td>CMPT 373</td>
<td><strong>CMPT 307</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- START MODALS -->
<!-- CMPT 310-->
<div class="modal fade" id="CMPT310" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="img-responsive" src="images/cmpt310.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span4">
Image:<img src="Tulips.jpg" ></img>
</div>
<div class="span4 ">
<table class="table borderless">
<tr>
<td><b>Test image</b></td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
My output1:
and when i test for its responsiveness by using a mobile phone i get an output2 as :
Can anybody help me with the code i have posted to make it look as output1 even for mobile view...thank you...
Here you go:
<div class="row">
<div class="col-xs-6">Image:
<img class="img-responsive" src="Tulips.jpg"></img>
</div>
<div class="col-xs-6 ">
<table class="table borderless">
<tr>
<td><b>Test image</b>
</td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</div>
I got the answer:
<div class="row">
<table class="table borderless">
<tr>
<td>
<div class="span4">
Image:<img src="Tulips.jpg" ></img>
</div>
</td>
<td>
<div class="span4 ">
<table class="table borderless">
<tr>
<td><b>Test image</b></td>
</tr>
<tr>
<td>testing testing</td>
</tr>
<tr>
<td>120$</td>
</tr>
<tr>
<td>
<button class="btn btn-primary" type="button">Default button</button>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
thank you for you consideration..