I'm trying to get multiple cards to show up beside each other under Bootstrap 4 tabs. I can get the cards to work fine without the tabs but when I add the tabs, the cards are only 1 per line (no matter the width).
This code shows the cards outside and inside the tabs (outside works, inside does not). Any ideas?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<title>Tracking DB</title>
</head>
<body>
<div class='container-fluid'>
<div class='col-md-5'>
<div class='row module-row'>
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Weight</div>
</div>
<div class='card-body module-card-body'>
<div>Weight Start: 215 lbs</div>
<div>Weight Current: 213 lbs</div>
<div>Weight Average: 285.7 lbs</div>
</div>
</div>
</div>
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Fitness</div>
</div>
<div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
</div>
</div>
</div>
<div class='row'>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
<a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
<a class="nav-item nav-link" id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" aria-selected="false">Third</a>
</div>
</nav>
</div>
<div class='row'>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Weight</div>
</div>
<div class='card-body module-card-body'>
<div>Weight Start: 215 lbs</div>
<div>Weight Current: 213 lbs</div>
<div>Weight Average: 285.7 lbs</div>
</div>
</div>
</div>
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Fitness</div>
</div>
<div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
This is the content on the second tab
</div>
<div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
Nothing on the third tab
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
This has everything to do with your nesting of elements. When you use bootstrap grid, you are constantly defining rows that are divided into columns. If you keep nesting rows in columns in rows, you will create ever more narrow columns. You're constantly subdividing the available space.
Also, I would recommend making sure that .row directly wraps .col divs. Your ends result will be much more predictable.
I added some html comments within the snippet.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<title>Tracking DB</title>
</head>
<body>
<div class='container-fluid'>
<div class='col-md-5'>
<div class='row module-row'>
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Weight</div>
</div>
<div class='card-body module-card-body'>
<div>Weight Start: 215 lbs</div>
<div>Weight Current: 213 lbs</div>
<div>Weight Average: 285.7 lbs</div>
</div>
</div>
</div>
<div class='col-md-4'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Fitness</div>
</div>
<div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711 (25)</div>
</div>
</div>
</div>
<div class='row'>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true">First</a>
<a class="nav-item nav-link" id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false">Second</a>
<a class="nav-item nav-link" id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" aria-selected="false">Third</a>
</div>
</nav>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab">
<div class='row'><!-- I moved this row to directly wrap the children columns -->
<div class='col-md-6 col-xs-6'><!-- also, adjsuted the specified width -->
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Weight</div>
</div>
<div class='card-body module-card-body'>
<div>Weight Start: 215 lbs</div>
<div>Weight Current: 213 lbs</div>
<div>Weight Average: 285.7 lbs</div>
</div>
</div>
</div>
<div class='col-md-6 col-xs-6'>
<div class='card'>
<div class='card-header module-card-header bg-secondary text-light'>
<div class=''>Fitness</div>
</div>
<div class='card-body module-card-body'>100 burpee Wednesday - 511 (8)<br>2 minute burpees - 711</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab">
This is the content on the second tab
</div>
<div class="tab-pane fade" id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab">
Nothing on the third tab
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
I am very new here, and have spent some time learning HTML, CSS, and Bootstrap (5). As a starter project to practise these skills, I am attempting to replicate another website which includes (amongst other things), a tabbed section.
I followed a tutorial to create a tabbed section and have got all the content in each tab (two columns in each - one column with a picture and one column with a H3 and some text). However, when attempting to switch between tabs, the tabs won't switch.
The original tutorial was pretty minimal, and after it wouldn't work I tried searching on here and on Google. A few others suggested adding roles and aria controls to each div, which I tried but am still unsuccessful.
Please take a look and let me know what I have missed!
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta name="author" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<Meta name="description" content="">
<title>Starbucks Tabs</title>
</head>
<body>
<section id="favourites">
<div class="container-fluid favourites-header">
<h2 class="sectionheader">Get your favourites for free</h2>
</div>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" id="25link" data-bs-toggle="tab" role="tab" href="#25tab" aria-controls="25tab" aria-selected="true">25*</a></li>
<li class="nav-item"><a class="nav-link" id="50link" data-bs-toggle="tab" role="tab" href="#50tab" aria-controls="50tab" aria-selected="false">50*</a></li>
<li class="nav-item"><a class="nav-link" id="150link" data-bs-toggle="tab" role="tab" href="#150tab" aria-controls="150tab" aria-selected="false">150*</a></li>
<li class="nav-item"><a class="nav-link" id="200link" data-bs-toggle="tab" role="tab" href="#200tab" aria-controls="200tab" aria-selected="false">200*</a></li>
<li class="nav-item"><a class="nav-link" id="400link" data-bs-toggle="tab" role="tab" href="#400tab" aria-controls="400tab" aria-selected="false">400*</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active show fade" role="tabpanel" id="25tab" aria-labelledby="25link">
<div class="row">
<div class="col">
<img src="img/025.png" alt="an espresso and a latte">
</div>
<div class="col">
<h3>Customise your drink</h3>
<p>Make your drink just right with an extra espresso shot, dairy substitute or a dash of your favorite syrup.</p>
</div>
</div>
</div>
<div class="tab-pane fade" role="tabpanel" id="50tab" aria-labelledby="50link">
<div class="row">
<div class="col">
<img src="img/050.png" alt="a cake and a black americano">
</div>
<div class="col">
<h3>Brewed hot coffee, bakery item, or hot tea</h3>
<p>Pair coffee cake or an almond croissant with your fresh cup of hot brew.</p>
</div>
</div>
</div>
<div class="tab-pane fade" role="tabpanel" id="150tab" aria-labelledby="150link">
<div class="row">
<div class="col">
<img src="img/150.png" alt="a muffin, a soda, and a caramel latte">
</div>
<div class="col">
<h3>Handcrafted drink, hot breakfast or parfait</h3>
<p>Have a really good morning with a breakfast sandwich, oatmeal or your favorite drink.</p>
</div>
</div>
</div>
<div class="tab-pane fade" role="tabpanel" id="200tab" aria-labelledby="200link">
<div class="row">
<div class="col">
<img src="img/200.png" alt="a chicken salad and a snack box">
</div>
<div class="col">
<h3>Salad, sandwich, or protein box</h3>
<p>Nourish your day with a hearty Chipotle Chicken Wrap or Eggs & Cheese Protein Box.</p>
</div>
</div>
</div>
<div class="tab-pane fade" role="tabpanel" id="400tab" aria-labelledby="400link">
<div class="row">
<div class="col">
<img src="img/400.png" alt="a mug and a bag of coffee">
</div>
<div class="col">
<h3>Select merchandise or at-home coffee</h3>
<p>Take home a signature cup, a bag of coffee or your choice of select coffee accessories.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You have done everything correctly, except the id values. It should not begin with a number. You can read more about it here What are valid values for the id attribute in HTML?.
i have the following html code, and i use bootstrap 3. What i try to achieve is to have the 4 buttons with the klasse text, be the first two in the same row, and the next two, in the next row. Now each button is shown in its own row.
How the below code should be altered?
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center"><a class="button" href="http://site/">klasse 1</a><a class="button" href="http://site">klasse 2</a><a class="button" href="http://site/">klasse 3</a><a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem with all suggested solutions, is that when i use the following drupal theme button class, it does not force buttons to be on the same row, when i have for instance text as large as the following in all buttons:
Use Bootstrap’s custom button styles for actions in forms...
https://www.drupal.org/project/showcase_lite
you need something like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 1</a>
<a class="btn btn-primary" href="http://site">klasse 2</a>
</div>
<br>
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 3</a>
<a class="btn btn-primary" href="http://site/">klasse 4</a>
</div>
</div>
Not sure if it is what you would like to achieve, please let me know, if not I'll give you more solutions:
Basically I have deleted button klasse3 & klasse4 from the "p class text-center" and I have added them into another "p class text-center" below.
This is a simple solution, but I think you could achieve a better result with a different solution
Actual Button
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 1</a>
<a class="btn btn-default" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 3</a>
<a class="btn btn-default" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Plain text
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="button" href="http://site/">klasse 1</a>
<a class="button" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="button" href="http://site/">klasse 3</a>
<a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Having problem with one of my development work that from time to time the page is rendering as text. Look at the http header and I cannot see anything wrong. Can someone give me a helping eye.
Thanks
0000
HTTP/1.1 200 OK
Date: Fri, 09 Dec 2016 13:15:49 GMT
Content-Length: 5621
Content-Type: text/html; charset=ISO-8859-1
Content-Language: en
X-Powered-By: Servlet/2.5 JSP/2.1
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RunDetails</title>
<script type="text/javascript" src="/environment/resources/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/environment/resources/dev/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-animate.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="/environment/resources/js/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="/environment/resources/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/tooltip.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.tpl.js"></script>
<script type="text/javascript" src="/environment/resources/js/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/css/em.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<!-- jQuery/Bootstrap JS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="envmon-header">
<div class="row">
<div class="col-md-1" id="logo">
<img src="/environment/resources/dev/img/flight.jpg">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6" id="headertitle">
<!-- <h1>Environment Monitoring</h1> -->
<h1>Environment Monitoring</h1>
</div>
</div>
<ul class="nav nav-pills">
<li><h2>Run A REPORT</h2></li>
<li class="dropdown" >
<h2 class="dropdown-toggle" data-toggle="dropdown">CONFIGURATION <b class="caret"></b></h2>
<ul class="dropdown-menu1" role="menu">
<li>Component Search</li>
<li>Component Group Search</li>
<li>Time Period Search</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="envmon-body" >
<div id="angularTestPage" class="theme-showcase row" ng-controller="RunDetailsPageController">
<!-- Error container. This should be populate with right error message on execution. -->
<div ng-cloak class="row">
<div ng-cloak class="alert-danger" ng-repeat="error in headerErrors">
{{error.message}}
</div>
<div ng-cloak class="alert-warning" ng-repeat="warning in headerWarnings">
{{warning.message}}
</div>
<div ng-cloak class="alert-info" ng-repeat="info in headerInfos">
{{info.message}}
</div>
<div ng-cloak class="global-error alert alert-success header-errors" ng-repeat="success in headerSuccesses">
{{success.message}}
</div>
</div>
<!-- vvvvvvvvvvvvvvvvvvvvvvv Actual Content Start Here vvvvvvvvvvvvvvvvvvvvvvv -->
<div id="content-title" class="row">
<div class="col-md-6 pageTitle align-left">Test Run Details</div>
<div class="col-md-6" >
<input type="submit" ng-click="exportButtonClicked()" id="btnExport" class="styled-button pull-right" value="EXPORT" />
</div>
</div>
<div id="run-detailsid" class="row">
<div id="" name="" class="row table-header-row" >
<div class="col-md-1">Component</div>
<div class="col-md-1">Status</div>
<div class="col-md-4">Test Name</div>
<div class="col-md-2">Service</div>
<div class="col-md-2">Operation</div>
<div class="col-md-2">Created Date</div>
</div>
<div id="" name="" class="row table-detail-row-wrap" ng-repeat="runDetail in runDetails">
<div class="col-md-1 table-cell centered">{{runDetail.componentName}}</div>
<div class="col-md-1 table-cell centered">
<div ng-show="runDetail.testLogId != ''">
<a href="" ng-click="runSelectedTestId(runDetail.testLogId);">
<img ng-src="{{runDetail.status == 2 ? redCircleImageLocation : greenCircleImageLocation}}" border="0" >
</a>
</div>
</div>
<div class="col-md-4 ">{{runDetail.testName}}</div>
<div class="col-md-2 ">{{runDetail.service}}</div>
<div class="col-md-2 ">{{runDetail.operation}}</div>
<div class="col-md-2 ">{{runDetail.createdDate}}</div>
</div>
</div>
<div> </div>
<div class="col-md-12 centered">runId = {{runDetails[0].runId}} </div>
</div>
<script type="text/javascript" src="/environment/resources/js/controllers/rundetails.js"></script>
</div>
<div id="envmon-footer">
<div class="row">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
So I have this website that uses a bootstrap grid system and which works 100% perfectly on firefox but not properly on google chrome or safari.
How is this so?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
<li role="presentation">INDEX</li>
</ul>
</div>
<div class="container">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="index">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="INDEX">...</div>
</div>
</div>
</div>
</body>
</html>
Firefox:
Google chrome and safari:
UPDATE
Edited the post with the complete HTML.
According to Bootstrap 3 documentation, there's an error with justified navs "in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing". Perhaps that produces a conflict between elements, make some changes to see if your problem goes into that direction.
Please keep us updated and/or confirm if you have already found a solution. Best regards!
I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.
As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!