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 .
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 a table that is supposed to represent a CRUD application in which there is a person's details as well as an edit and delete button. The two buttons (as well as any other buttons that may be added later) are intended to display side by side of each other. This works on larger screen sizes, however on smaller devices, the buttons stack on top of each other.
How do I make it so that the buttons remain to the side of each other on smaller screen sizes?
<head>
<!--Material Icons -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body class="bg-light">
<!-- Main body -->
<div class="container">
<!-- Table -->
<div class="table-responsive">
<table class="table table-fit mt-5 table-dark table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>myFirstName</td>
<td>myLastName</td>
<td>#myHandle</td>
<td>
<a type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</a>
<a type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>anotherFirstName</td>
<td>anotherLastName</td>
<td>#anotherHandle</td>
<td>
<a type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</a>
<a type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
The issue has been solved by putting both buttons inside of a flex container
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Material Icons -->
<link
href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body class="bg-light">
<!-- Main body -->
<div class="container">
<!-- Table -->
<div class="table-responsive" >
<table class="table table-fit mt-5 table-dark table-striped" >
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>myFirstName</td>
<td>myLastName</td>
<td>#myHandle</td>
<td >
<div class="d-flex flex-row mb-3">
<div ><button type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</button></div>
<div ><button type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</button></div>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>anotherFirstName</td>
<td>anotherLastName</td>
<td>#anotherHandle</td>
<td >
<div class="d-flex flex-row mb-3">
<div ><button type="button" class="btn">
<i class="material-icons text-warning">edit</i>
</button></div>
<div ><button type="button" class="btn">
<i class="material-icons text-danger">delete</i>
</button></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
That's a really painful situation every developer faced during such use cases.
Nevertheless, there are a couple of solutions (I would say UX ) you should consider:
If there is a high chance of increasing action buttons, you can simply group them all and add more buttons to display the list of action items:
Refer the screenshot
If you don't want to go with option 1., you can choose to convert your table into an accordion after specific breakpoints where the user can see the full name and all the action items or make it a card-based layout to display all the records.
Display all the action items on the hover of the row. All the action items would be slide/fade from/on the right side on top of the row. Similar to Gmail.
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 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>
<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..