Bootstrap-Carousel not working - html

I've been trying to load a simple html page with a carousel but the carousel does not fit the screen. Here is a screenshot:
Html page
And below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Carousel / Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- My Custom CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider"class="carousel slide" data-ride="carousel">
<!-- Indicators dot nav -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/apple.jpg" alt="Fruits"/>
<div class="carousel-caption">
<h1>Assorted Fruits</h1>
</div>
</div>
</div>
<!-- Controls Next Prev buttons -->
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't know what is making the carousel to not fit the screen. I'm just beginning to learn frontend so if anyone could give a detailed explanation, I would be grateful.
EDIT: This is what it looks like if I add more than one picture to the carousel: The same page

Here is the working design.
You have missed a lot of code due to which it makes unworkable and also I didn't see the code for the second image. Rule is you will have to include all the images inside its respective class="item".
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="one.jpg" alt="...">
</div>
<div class="item>
<img src="two.jpg" alt="...">
</div>
</div>
This example was using data-attributes (data-ride="carousel"). You can also achieve this using Java script by calling carousel class manually $('.carousel').carousel()
Important Note : Always include Jquery before the bootstrap.js(or any library) file to avoid any bugs.

you html seems invalid the scripts tags should be on the head tag close to your stylesheet, another thing that that you forgot to close the head and open de body

Related

Using <embed> to embed an HTML document causes large gap

My embed method is coded like that:
<embed type="text/html" src="header.html">
Now, I succeeded to embed the header.html file into the index.html but as a result I got also a weird long padding gap from the top header.
This is the header.html file:
<div class="top-main-area text-center">
<div class="container">
<a href="index.html" class="logo mt5">
<img src="img/logos/logo4.png" />
</a>
</div>
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<!-- a couple of li here -->
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="col-md-6">
</div>
</div>
</div>
</header>
<div class="gap"></div>
Here is how I embed it in the index.html:
<head>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/font_awesome.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body class="boxed bg-cover" style="background-image: url(img/backgrounds/wood.jpg)">
<div class="global-wrap">
<embed type="text/html" src="header.html">
I tried to play with the CSS settings but i didn't succeed.
Why i keep getting that long padding gap?
I tried to play with the CSS settings but i didn't succeed.
It is a separate (and invalid) document. <embed> is functioning as a (poorly defined) <iframe>.
You are missing the Doctype and the head element. You don't have a stylesheet in it, so you get the default margin / padding on the body element.

Less setup: Bootstrap row grid not working

I am new to LESS, started working with it and the issue I am facing is that I can't get the bootstrap row/column to work. I want three thumbnails to appear side by side (i.e. three columns in one row) but it won't happen. Is it because I have messed up any of the LESS files?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:900,700,400,500|Open+Sans:400,700,300|Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!-- the bootstrap compiled file outputted from LESS -->
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- compiled version of my styles, outputted from LESS file where I edit my styles -->
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<section class="container">
<h2>Heading</h2>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 1 -->
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 2 -->
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 3 -->
</div> <!-- row -->
</section> <!-- container -->
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body></html>
I tested my code on a normal boostrap setup (without Less) and it is working perfectly fine. But when the same code in my LESS set up the pictures get stacked vertically rather than horizontally.
Having seen it work on jsfiddle, I think the reason it is not working locally is because there may be some issue with my Bootstrap import, because for a verification, when I tried to do this feature of Bootstrap it did not work and I got this instead, so something to do with Bootstrap?
Thank you in advance!

How do I link an external css to overwrite bootstrap css for centering elements?

I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that box
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Example</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">Work</div>
<div class="col-md-4">About</div>
<div class="col-md-4">Contact</div>
</div>
</body>
</html>
Thanks for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>

Changing between 2 chart every 10 seconds using Bootstrap

I have 2 charts(line and bar chart) and I want to change between them every 10 seconds or so. I tried Bootstrap carousel but it doesn't seems to work when I replace the image src with the id of my chart. The id for those 2 charts are:
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
Is there a way I could make it work? Thanks!
EDIT:
<!DOCTYPE html>
<html>
<head>
<?php include 'linechart.php'; ?>
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="cycle-slideshow">
<div id="PieChart"></div>
<div id="DailyBarChart"></div>
</div>
<!-- end page-wrapper -->
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/scripts/zingchart-html5-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
It seems like it could only work on images.
Using jQuery.Cycle2, you could do it this way :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow" data-cycle-timeout="10000" data-cycle-slides="> div">
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
</div>

how to make bootstrap icon text and button vertical center in div

I am trying to make the icon, text and button sit in the center of the div vertically.
So, tried to use bootstrap class well, but still not working. Could someone help me on that?
Here is the image to reference:
Css part:
.brl-icon-size { font-size: 2.5em; }
Here is all my code:
<html>
<head>
<title>Index file</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
Sidebar
</div>
<div class="col-md-10 col-md-offset-2 content">
<div class="well well-lg">
<span class="glyphicon glyphicon-file brl-icon-size"></span>
<span>New Message</span>
<div class="pull-right">
Save draft
<button>Publish</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.valign-top {
vertical-align:top;
}
HTML:
<div class="pull-right">
<span class="valign-top">Save draft</span>
<button>Publish</button>
</div>
Online Demo 1
EDIT 1:
In case you use different font-size properties on aligned elements, then you should specify line-height property.
Online Demo 2
EDIT 2:
It's easier and more correct to just wrap you icon into small tag:
<small></small>
Or simply using custom modifier class:
.icon-any-size {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}