Element alignment in bootstrap - html

I have a page with a header, textarea and a button as shown in this jsfiddle page (link to jsfiddle)
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><title>example.com</title></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="container fill">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar"><span
class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span></button>
example</div>
</div>
</nav>
<div>
<div class="container fill">
<div><textarea>a</textarea>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Save</li>
<li>Copy</li>
<li class="divider" role="separator"></li>
<li>Delete</li>
</ul>
</div>
</div>
<div class="content">
<div><p>a</p>
</div>
</div></div></div></div></div>
</body>
</html>
How do I make the elements line up as shown in the following image
Also, what's the best approach for debugging such issues? What tools can I use to work out why a page is displaying in an unexpected manner or why the browser is laid out elements the way it has?

You are missing to include the Bootstrap 3 framework css links and js, you can use the CDN provided on official bootstrap 3.3 docs:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You fiddle updated: https://jsfiddle.net/e7gdk04v/8/
To archieve your layout you can use the Bootstrap 3 grid system, inside your class="container" div create a new div with class="row" and use the grid, for example on the textarea div wrapper add class="col-12" and make the text area 100% width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>example.com</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="container fill">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar"><span
class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span></button>
example</div>
</div>
</nav>
<div>
<div class="container fill">
<div class="row">
<div class="col-12"><textarea style="width: 100%">a</textarea>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Save</li>
<li>Copy</li>
<li class="divider" role="separator"></li>
<li>Delete</li>
</ul>
</div>
</div>
<div class="content">
<div><p>a</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Collapse in Bootstrap 5 not working when I click on the toggle button

Collapse is not working when I click on the toggle button. Here's my code. What changes do I need to make to get this working?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Project Prototype</title>
</head>
<body>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">About</h5>
<p class="text-muted">Toggleable via the navbar brand.</p>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="movie-cinema-svgrepo-com.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Project
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
</html>
You need to add Bootstrap JavaScript bundle.
Place the following <script> near the end of your pages, right before the closing </body> tag.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
JavaScript bootstrap plugin missing in your code. You've to include both the plugins and dependency,bootstrap.bundle.js and bootstrap.bundle.min.js.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Just add the above script☝️

"connect" dropdown box and input form in bootstrap

So I have the HTML below. If you click on the search (in the top right), you'll see a dropdown box appear in the top left. I want to "connect" these, so that the dropdown box is properly below the search box and the whole thing behaves like how a button connected to a dropdown would.
I'm not really a web guy and I don't really "know" Bootstrap (this is my first time using it) so please bear that in mind!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://use.fontawesome.com/6e0448e881.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" method="get">
<input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off"/>
<div id="search_results" class="dropdown-menu" role="menu">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</form>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
You have to override the class applied to the dropdown menu, which is called .dropdown-menu.
In your css:
.dropdown-menu{
left: initial;
}
Depending on how your css structure looks you may call this rule with an !important behind the inital statement.

Adding an image tag breaks navbar in bootstrap

enter image description hereEverytime I add a image with img tag to the html file the navbar stops working? Anyone have an idea... thank you in advance. I thought at first it had something to do with the img-responsive class but it seems not to be the issue.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>
About
</title>
<meta name="description" content="is applying to be a full stack developer student .">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="css.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav" aria-expanded="false" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li class="active">ABOUT <span class="sr-only">(current)</span></li>
<li>RESUME</li>
<li>PROJECTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">
<p class="intro">Hi, my name is<br> Angel<br>and I am a</p>
<div class="textShow">
<div class="textSlider fade">
<p><strong>DEVELOPER</strong></p>
</div>
<div class="textSlider fade">
<p><strong>M.B.A.</strong></p>
</div>
<div class="textSlider fade">
<p><strong>VETERAN</strong></p>
</div>
<div class="textSlider fade">
<p><strong>FOODIE</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 middleOne">
<p class="groundUp">Creating and building from the ground up</p>
//this breaks navbar<img class=" img-responsive beet1" src="Graphics/beetv1.svg" alt="RedBeet"/>
</div>
</div>
</body>
</html>
If there is a sample code of the responsive menu along with the photo in the menu, please send a comment in this post. If it is possible, please develop my same code so that I can put a picture in its menu.

collapsible navbar not working

I am trying to design a webpage using bootstrap. But my navbar does not collapse.
All the contents of span box are supposed to be inside the created button.But they appear on the header itself.
What could be the problem?
Here is the code:
<html lang="en">
<head>
<meta charset="utf.8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!--navbar navbar-inverse:black bar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar">
<div class="container">
<div class="navbar-header">
<!--button data toogle set to collapse for enabling size variations ex.mobile-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<!--span box list of items inside the button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Sample
</div><!--Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feedback
<li>Gallery
<li>Contact
</ul>
</div>
</div><!--Container-->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
It's not data-toogle, it's data-toggle.
Fix the typo:
data-toogle="collapse"

"Mobile" Bootstrap-Navbar not working

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stadtfestlauf - Start</title>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="avcontent">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb
<li>Anmelden
<li>Sponsoren
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
<div class="container" id="pcontent">
<div class="col-md-7">
<div class="jumbotron">
<h1>Hallo</h1>
<p>sample text</p>
<div class="wrapper">
<p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p>
</div>
</div>
</div>
<div class="col-md-5" id="imgslide">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img">
</div>
<div class="item">
<img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's a my index.html. When I try it out on my mobile, the navigation bar doesn't work. I searched for missing div's tags.
You need to change the data-targetof your button to the ID of your navbar-collapseelement.
Furthermore your html is missing some closing <li>'s.
Change your nav code to this:
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./Index.html">Stadtfestlauf</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="active">Startseite</li>
<li>Rückblick</li>
<li>Wettbewerb</li>
<li>Anmelden</li>
<li>Sponsoren</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It's also necessary to import jQuery before importing bootstrap, out of order it won't work. It should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
For my the solution was to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure that you put jQuery script before Bootscript link in your header part i.e. (in the following order)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2023 Solution from Bootstrap API docs
Assuming no syntax errors inside your nav tag...
Put this code in the head of your HTML file. It "plugs in" jQuery & Popper, which Bootstrap depends on in order to make the "mobile" navbar work.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Reference