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!
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?.
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
My relevant code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-lg-10">
<div class="tab-content">
<div id="AAA" class="tab-pane fade in active">
<h2>AAA</h2>
<p>
Lorem ipsum dolor
</p>
</div>
<div id="BBB" class="tab-pane fade in">
<h2>BBB</h2>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
</div>
<div class="col-lg-2 sidenav" dir="rtl">
<ul class="nav nav-pills nav-stacked">
<li class="active">AAA</li>
<li>BBB</li>
</ul>
</div>
</div>
</div>
</body>
This give me a nice vertical pills aligned to the left of the column:
pills stuck to the left.
But I want them to be aligned to the right, like this (made in mspaint): pills on the right.
I tried every align option I could think of... But nothing worked.
Thank you!
The ul has default padding on right, change it to left. I have wrapped the css inside a media query so that they will be right aligned on desktop, but you can remove that.
I have also set padding:0; for .sidenav and some border to show the alignment.
#media (min-width:768px){
.nav.nav-pills{
padding-right:0;
padding-left:40px;
}
.sidenav{
border:1px solid black;
padding:0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row content">
<div class="col-lg-10">
<div class="tab-content">
<div id="AAA" class="tab-pane fade in active">
<h2>AAA</h2>
<p>
Lorem ipsum dolor
</p>
</div>
<div id="BBB" class="tab-pane fade in">
<h2>BBB</h2>
<p>
Lorem ipsum dolor
</p>
</div>
</div>
</div>
<div class="col-lg-2 sidenav" dir="rtl">
<ul class="nav nav-pills nav-stacked">
<li class="active">AAA</li>
<li>BBB</li>
</ul>
</div>
</div>
</div>
</body>
I'm new to Twitter Bootstrap framework and CSS.
I want my right sidebar height to go along with the height of my main content. How should I do that.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="includes/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/Bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="container">
<div class="container-fluid">
<header class="margin-top">
<div class="row-fluid">
<img border=0 src="images/header.jpg" alt="">
</div>
</header>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Home</li>
<li>Contact </li>
<li>About Us</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
If I have a long content here.. The sidebar does not follow the height of the content.
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div>
</div>
</body>
</html>
your container seems to be fine and has a auto height so what is the problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}
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!