Bootstrap v4-Alpha 6 | .float-lg-right not working - html

I'm trying to create a bootstrap website, with the menu navigation content aligned to the right, using .float-lg-right (formally .pull-lg-right). The issue is the ul remains aligned to left.
The interesting thing is that using .float-md-right, the content aligns to the right in the collapsed menu.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META DATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>TEXT</title>
<!-- CSS & ASSETS-->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-toggleable-md mb-4">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">TEST</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto float-lg-right">
<li class="nav-item">
<a class="navlink" href="#">TEXT</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

For float-*-right use ml-auto
For float-*-left use mr-auto

I had the same problem and the people who have v4 alpha 6 are mainly stuck at this situation.
So I had a look at the bootstrap documentation for days and finally found the solution.
For floating to the left side:
<div class="d-flex justify-content-end">
<div class="mr-auto">Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>
For floating to the right side:
<div class="d-flex justify-content-start">
<div>Flex item</div>
<div>Flex item</div>
<div class="mr-auto p-2">Flex item</div>
</div>
For further information visit: https://v4-alpha.getbootstrap.com/utilities/flexbox/#with-justify-content
I recommend that v4 alpha 6 users should have a look at this answer

I just found that if I exclude class="row" on the patent element it allowed float-md-right on my divorce with class="col-12 col-md-5".
<div>
<div class="col-12 col-md-5 float-md-right">
This floats right
</div>
<div class="col-12 col-md-6 offset-md-6">
Thus is on left
</div>
</div>

Related

Element alignment in bootstrap

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>

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.

How to increase height of menu bar in bootstrap

How to increase height of menu bar in this code,
how decrease column size and height
how put a rich css for this design can anyone help me without any custom css.
in notice column data should display in that yellow color place only
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="newcss.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar" id="side1">Links</div>
<div class="col-md-8">
<div class="page-header">
<h1>Student Management System</h1>
</div>
<p class="lead">Home Page.</p>
</div>
<div class="col-md-2 sidebar" id="side2">notice</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
</html>
I didn't get your actual requirement, but menubar height can be increased by adding following CSS.
Note: This is a workaround, may not be responsive
.navbar{
height : 100px !important; /*keep your own height here*/
}

Align two divs in bootstrap

I can't align two divs horizontally at the same level in bootstrap. In fact, They are not a the same level horizontally, but either one below the other one (even if there is one left and another right) . In fact I want to align horizontally
and
That's why I used
followed by
.
here is my code :
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<br><br><br><br>
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</body>
</html>
From your code:
<div class="col-sm-3 col-md-2 sidebar">
[...]
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
[...]
</div>
The problem is that your grid has 3 + 9 + 3 (offset) = 15 columns on small screen (col-sm-X), and 2 + 10 + 2 (offset) = 14 columns on medium screen (col-md-X).
The bootstrap grid has only 12 columns by default.
Removing the offsets should make it work
<div class="col-sm-3 col-md-2 sidebar">
[...]
</div>
<div class="col-sm-9 col-md-10 main">
[...]
</div>
Your question isn't clear as to which elements you are trying to align left or right, however, the shortcut method in bootstrap to do this are the classes "pull-left" or "pull-right". From a CSS perspective, they are adding float: left and float: right to the elements.
http://getbootstrap.com/css/#helper-classes-floats
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar pull-left">
<br><br><br><br>
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main pull-right">
<h1 class="page-header">Dashboard</h1>
<div></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</body>
</html>
try the following class:
<div class="span6"></div>
<div class="span6"></div>
This would give the div a 50% width and align them correctly :)

Bootstrap form does not align with h1 in with search form

The search form is not centrally (vertical) aligned in the jumbotron like the heading Sellr Buyr. Here is the code. Although I know padding or adding a margin will help.
I need the "class" to insert that aligns it perfectly well in large and medium screens.
Here is my Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sellr Buyr</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="keywords1, change later">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- stylesheets and js paths must be updated later -->
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container"><!--fluid container-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-header"><!--nav-header-->
<a class="navbar-brand" href="homepage">$ SellrBuyr</a>
</div><!--/nav-header-->
<div class="collapse navbar-collapse"><!--main-nav-collapse-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">LOGIN<i class="caret"></i></li>
<li class="dropdown">REGISTER<i class="caret"></i></li>
<li class="btn-danger">PUBLISH YOUR AD FOR FREE</li>
</ul>
</div><!--/main-nav-collapse-->
</div><!--/fluid container-->
</nav>
<div class="jumbotron"><!--jumbotron-->
<div class="container"><!--container-->
<div id="logo" class="col-lg-6"><!--logo-->
<h1>Sellr Buyr</h1>
<span id="description">Sell Buy Hire Rent in India - Goods Services Products Property - Jobs and Matrimonial Services - Post Free Classified Ads Online</span>
</div><!--/logo-->
<div class="col-lg-6 "><!--col-lg-6 -->
<div class="input-group input-group-lg">
<input type="search" class="form-control" placeholder="Search Here">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div><!-- /input-group -->
</div><!-- col-lg-6 -->
</div><!--/container-->
</div><!--/jumbotron-->
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
</body>
</html>
How can i do this ?
I dont think you can do that as you want.
You have to "fix" height in order to do that and then play also with the media-queries.
I will suggest you to look here how to vertical align:
http://phrogz.net/CSS/vertical-align/index.html
Let me know what you think and will try to help you with some workaround.