DisplayEman
Reputation: 3
Columns visualization in Bootstrap layout
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>
<a href="" class="navbar-brand">Random</a>
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#feed">Feed</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#feature">Feature</a>
<li><a href="#contact">Contact</a>
</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>
Upvotes: 0
Views: 124
Answers (2)
totymedli
Reputation: 31048
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>
<a href="" class="navbar-brand">Random</a>
</div>
<!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#feed">Feed</a>
</li>
<li><a href="#gallery">Gallery</a>
</li>
<li><a href="#feature">Feature</a>
</li>
<li><a href="#contact">Contact</a>
</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>Upvotes: 2
Nenad Vracar
Reputation: 122027
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>
<a href="" class="navbar-brand">Random</a>
</div> <!--Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#feed">Feed</a>
<li><a href="#gallery">Gallery</a>
<li><a href="#feature">Feature</a>
<li><a href="#contact">Contact</a>
</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>
Upvotes: 0
Related Questions
- How can I get this column layout using Bootstrap?
- 8 Columns in Twitter Bootstrap
- Bootstrap columns with other columns inside
- Bootstrap columns adjust number of columns
- Stuck with columns with bootstrap
- Columns in Bootstrap
- Multi-column layout with bootstrap
- Bootstrap two column layout
- Bootstrap Column layout with content
- Bootstrap columns in column