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>
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">
I have the following table:
<link rel="stylesheet" href="https://stackpath.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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-responsive">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pedro</td>
<td>mk-567</td>
<td>
<div class="btn btn-group">
<button type="button" class="btn btn-default btn-xs">
<i class="fa fa-search"></i>
</button>
<button type="button" class="btn btn-default btn-xs">
<i class="fa fa-trash-o"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
As you can see, col4 has way to much width, I tried to set width:auto but it does not work and if I manually set the width, when I change my page resolution it looks bad, really bad. I tried to set to width: 1px but the buttons do not wrap each other.
There is a way to "auto width" the column to the buttons?
You dont need use "button-group" in table. Table is already working on row-col system. Just put buttons in same row.
.container {
padding: 2rem 0rem;
}
h4 {
margin: 2rem 0rem 1rem;
}
.table-image {
td,
th {
vertical-align: middle;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Shares</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>2.846</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>3.417</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.234</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<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/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I have a responsive table and a button, now I want to make them align right so I do this:
<div class="container-fluid" id="main">
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br>
<div class="table-responsive">
<table class="table table-striped">
<!-- table -->
</table>
</div>
</div>
I add pull-right to the button and the page looks like this:
How can I make the button and table align right properly?
As you can see from the example pull-right class should be working. You might have some problem with padding-right on the parent div of the table, or maybe some col-sm-11 class?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid" id="main">
</br></br>
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br></br>
<div class="table-responsive">
<table class="table table-striped">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</div>
</div>
use col-sm-offset.
<div class="container-fluid col-sm-offset-2" id="main">
<button type="button" class="btn btn-primary btn-sm pull-right">upload</button>
</br>
<div class="table-responsive">
<table class="table table-striped">
<!-- table -->
</table>
</div>
</div>
By default,td items aligned to left so override it.
#main table tr td:last-child{
text-align: right !important;
}
I am trying to create a page using twitter bootstrap.
My problem is font awesome icons are not working everywhere.As you can see in code i provided,in button amazon and cart icons displaying properly but dollar icon is not being displayed.Similarly Android icon working but battery and camera icons not working.What i am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<div class="card-body">
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Samsung galaxy note 8</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2">
<button type="button" class="btn btn-lg btn-outline-secondary amazon"><i class="fa fa-amazon"></i><a href="" > Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary"><i class="fa fa-dollar-sign"></i> 400</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay"><i class="fa fa-shopping-cart"></i> Ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary">500</button>
</div>
</div>
</div>
</div>
<div class="spec">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th><i class="fa fa-android"></i> OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32/64GB<br>
Expandable: Yes(128GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4GB</td>
</tr>
<tr>
<th><i class="fa fa-battery-bolt"></i> Battery & SIM</th>
<td>Dual Sim(1 nano and 1 micro)4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th><i class="fa fa-camera-alt"></i> Camera</th>
<td>Rear:13MP (CMOS Camera,f2.0 Aperature)<br>
Front: 5MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi)IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
There is a 'pro license' required for certain icons in font awesome. Try using fa-bolt and fa-camera instead. Also you can check icon reference at font awesome's website and see which icons are free and which require license.
Fa-Dollar-Sign is with new latest pack, if you have old pack, dollar sign is fa-usd. It is pointed out on their website.
<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..