<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..
Related
I have 2 objects in corporate_goal and I am trying to execute blocks with this objects in for loop like:
{% load static %}
{% for goal in corporate_goal %}
{% block content %}
<!-- Corporate goal section-->
<div class="row">
<div class="section-title">
Corporate Goal: {{goal.corp_goal_title}}
</div>
<div style="margin-inline-start:auto">
{{todo}}0 % of total score TODO
</div>
</div>
<div class="row">
<p>HR Rating</p>
<p> </p>
{% if goal.corp_factor_rate %}
<p style="color:mediumspringgreen">rated</p>
{% else %}
<p style="color:indianred">unrated</p>
{% endif %}
<p> </p>
</div>
<!-- Tabs for details-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#det1{{goal.corp_goal_title}}">Goal Details</a></li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#det2{{goal.corp_goal_title}}">Other Details</a></li>
</ul>
<!-- Tabs content for details-->
<div class="tab-content" >
<!--First tab-->
<div id="det1{{goal.corp_goal_title}}" class="tab-pane fade show active">
<div class="row">
<!--Column 1-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Start Date</th>
<td width="50"></td>
<td>{{goal.start_date}}</td>
</tr>
<tr>
<th>Weight</th>
<td width="20"></td>
<td>{{goal.corp_factor_weight}} %</td>
</tr>
</tbody>
</table>
</div>
<!--Column 2-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Due Date</th>
<td width="50"></td>
<td>{{goal.end_date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Second tab-->
<div id="det2{{goal.corp_goal_title}}" class="tab-pane fade" style="margin-top:20px;">
<p>Factor for Goal Achievement:</p>
<table class="table">
<tbody>
<tr>
<th>Factor</th>
<td>0</td>
<th>Description</th>
<td>{{goal.corp_factor_0}}</td>
</tr>
<tr>
<th>Factor</th>
<td>1</td>
<th>Description</th>
<td>{{goal.corp_factor_1}}</td>
</tr>
<tr>
<th>Factor</th>
<td>2</td>
<th>Description</th>
<td>{{goal.corp_factor_2}}</td>
</tr>
<tr>
<th>Factor</th>
<td>3</td>
<th>Description</th>
<td>{{goal.corp_factor_3}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<br />
{% endblock %}
{% endfor %}
In blocks I have nav-tabs, but it works only for first object in the loop. Why? Do you have some idea?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
For some reason I can't make my table rows size small/thin, why can't I just set the max-height?
I want it to have no space at the top and bottom for every row, maybe only 1-2px, but how?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<table class="table table-bordered table-hover">
<thead class="thead-dark" id="TableTitle">
<tr>
<th id="Testplans" style="width:30%;" scope="col">Testplans for <?php echo $ProjectsList;?></th>
<th id="PF" style="width: 200px;" scope="col">Status</th>
<th id="Date" style="width: 250px;" scope="col">Date</th>
<th id="Version" scope="col">Version</th>
</tr>
</thead>
<tbody>
<tr>
<td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
<a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
Test
</a>
</td>
<td id=".$testPlanData['TestJobId'].">
<div class='ml-1 d-flex'>
<div title='Not applicable'>
<button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
234 N/A
</button>
</div>
</div>
<br>
<div class='d-flex justify-content-start'></div>
</td>
<td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
<td id=".$testPlanData['TestJobId'].">
<small class='text-muted'> 123 </small>
</td>
</tr>
</tbody>
</table>
So more like this:
EDIT 12px padding?
The space appears, because inside your
<td id=".$testPlanData['TestJobId'].">
<div class='ml-1 d-flex'>
<div title='Not applicable'>
<button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData[' TestJobId ']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
234 N/A
</button>
</div>
</div>
<br>
<div class='d-flex justify-content-start'></div>
</td>
you have these two lines
<br>
<div class='d-flex justify-content-start'></div>
Remove them and it looks much better. Also you could remove the margin-bottom from your .btn class.
You can easily overwrite Bootstrap styles. I've changed the default .75rem padding to 0px. Also middle vertical aligning looks better to me. Check the style element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.table td, .table th {
padding: 0px;
vertical-align: middle;
}
</style>
<table class="table table-bordered table-hover">
<thead class="thead-dark" id="TableTitle">
<tr>
<th id="Testplans" style="width:30%;" scope="col">Testplans for <?php echo $ProjectsList;?></th>
<th id="PF" style="width: 200px;" scope="col">Status</th>
<th id="Date" style="width: 250px;" scope="col">Date</th>
<th id="Version" scope="col">Version</th>
</tr>
</thead>
<tbody>
<tr>
<td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
<a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
Test
</a>
</td>
<td id=".$testPlanData['TestJobId'].">
<div class='ml-1 d-flex'>
<div title='Not applicable'>
<button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
234 N/A
</button>
</div>
</div>
<br>
<div class='d-flex justify-content-start'></div>
</td>
<td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
<td id=".$testPlanData['TestJobId'].">
<small class='text-muted'> 123 </small>
</td>
</tr>
<tr>
<td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
<a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
Test
</a>
</td>
<td id=".$testPlanData['TestJobId'].">
<div class='ml-1 d-flex'>
<div title='Not applicable'>
<button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
234 N/A
</button>
</div>
</div>
<br>
<div class='d-flex justify-content-start'></div>
</td>
<td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
<td id=".$testPlanData['TestJobId'].">
<small class='text-muted'> 123 </small>
</td>
</tr>
<tr>
<td class='font-weight-bold' scope='row' id=".$testPlanData['TestJobId'].">
<a target='_blank' href='TestResults?ID=".$testPlanData['TestJobId']."'>
Test
</a>
</td>
<td id=".$testPlanData['TestJobId'].">
<div class='ml-1 d-flex'>
<div title='Not applicable'>
<button onclick='toggleHideShowTC(this.id)' id='na-".$testPlanData['TestJobId']."' style='white-space: nowrap;' title='Passed' class='btn btn-dark rounded text-light font-weight-bold h6 p-1 d-inline-block'>
234 N/A
</button>
</div>
</div>
<br>
<div class='d-flex justify-content-start'></div>
</td>
<td id=".$testPlanData['TestJobId']."><small class='text-muted'>12:13:1322</small></td>
<td id=".$testPlanData['TestJobId'].">
<small class='text-muted'> 123 </small>
</td>
</tr>
</tbody>
</table>
I have a modal in my page and a table in it. When I turn table to table-bordered it lost bootstrap style, and turns to normal html table!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Customer Modal -->
<div class="modal" style="text-align: center;" tabindex="-1" role="dialog" id="customerModal">
<div class="modal-dialog" style="max-width:100%; width:auto !important; display: inline-block;" role="document">
<div class="modal-content">
<div class="modal-body">
<div class=" justify-content-center ml-auto">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control" placeholder="جستجو ..." />
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="container modal-table">
<table class="table-bordered">
<thead class="thead-light">
<tr>
<th>Code</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>Email</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">exit</button>
</div>
</div>
</div>
</div>
and I can't even use any CSS for my table and it does not change.
I want to create a table with border but with bootstrap style.
Only when its class:"table" it looks with bootstrap style
copy table class from bootstrap main css then put it on table-bordered class .
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>