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?.
Related
I am completing a course from coursera on bootstrap and was following along with the course, but the toggle button on the navigation bar of one of the webpages isn't working and displays error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)"
I have the same code in the index.html (home page) and the button seems to be working perfectly in that, but in the aboutus.html it won't open the collapsed navigation options
Here are the codes:
aboutus.html --> the one with the error
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion: About Us</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-header">
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">About Us</li>
</ol>
<div class="col-sm-6">
<h3>About Us</h3>
<hr>
</div>
</div>
<div class="row row-content">
<div class="col col-sm-6 order-sm-last col-md-6">
<h2>Our History</h2>
<p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
<p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
</div>
<div>
</div>
</div>
<div class="row row-content">
<div class="col-12 col-sm-12">
<h2>Corporate Leadership</h2>
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, <em>You click only if you survive my lick.</em></p>
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm-6 order-sm-last col-md">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm-6 col-md">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="col col-sm-6 order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-center">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I believe you're missing the script tags at the end of your aboutus page. Try adding these lines just before you close your body tag.
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
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>
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've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}
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!