I tried to make my navigation menu keep responsive on mobile and tablet, but it always break into new line when I tested responsive mobile from browser development tool.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class='fa fa-floppy-o'></i> New
</li>
<li>
<i class='fa fa-pencil-square-o'></i> Edit
</li>
<li><i class='fa fa-check'></i> Cancel</li>
<li>
<div class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="ID" ID="ID">
</div>
</div>
</li>
<li>
<div class="btn-group" style="padding: 9px 0px 0px 0px; margin-left: 15px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Action</button>
<button type="button" class="btn btn-primary" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><i class='fa fa-files-o'></i> Copy Record</li>
<li><i class='fa fa-clipboard'></i> Paste Record</li>
<li><i class='fa fa-reply'></i> Reverse Record</li>
<li class="divider"></li>
<li><i class='fa fa-list'></i> List Live Record</li>
<li><i class='fa fa-list'></i> List Un-authorize Record</li>
<li><i class='fa fa-list'></i> List History Record</li>
<li class="divider"></li>
<li><i class='fa fa-print'></i> Export Record</li>
</ul>
</div>
</li>
</ul>
</div>
I would like to keep menu button, input box and dropdown menu keep as one line even on the mobile tablet break point.
How can I archive that, I'm not sure if problem caused from this <meta name="viewport" content="width=device-width, initial-scale=1"> but the only goal I would like to keep it as responsive. Thanks.
Related
I am using Bootstrap 3 to make left vertical menu. Here is a small part of my navbar code...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Address Book<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
People List
</li>
<li>
New Person
</li>
</ul>
</li>
</ul>
</div>
</div>
The above results in a menu lie this:
If I click on a menu item, sub menu items will appear, however, if the list is too long it is cut short and there is no way to scroll. How do I fix this?
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle"> Home </a>
<ul class="dropdown-menu">
<li routerLinkActive="active" routerLink="/application/link1">
<i class="fa {{aplcntStatusIcon}}" ></i> Link1
</li>
<li routerLinkActive="active" routerLink="/application/link2">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2
</li>
<li routerLinkActive="active" routerLink="/application/link-3">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3
</li>
</ul>
</li>
When I am trying with the following code it is displaying 'Home' with the dropdown toggle but when I try to expand that, it is not displaying the subitems (Link1,Link 2,Link3).
You have not given the full code, so I am writing this answer assuming you are using Bootstrap 4
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown">
<button data-toggle="dropdown" class="dropdown-toggle"> Home </button>
<ul class="dropdown-menu">
<li routerLinkActive="active" routerLink="/application/link1">
<i class="fa {{aplcntStatusIcon}}" ></i> Link1
</li>
<li routerLinkActive="active" routerLink="/application/link2">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2
</li>
<li routerLinkActive="active" routerLink="/application/link-3">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3
</li>
</ul>
</li>
</body>
</html>
See if the above code solves your problem.
I'm assuming you are using Bootstrap 4.x the script popper or the bootstrap bundle.
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
https://getbootstrap.com/docs/4.5/getting-started/download/
Just add this to you head tag
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
I'm trying to keep list buttons at same align but i dont know how to do it if text is long button's position changes automatically
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="1 days">
<!-- Bootstrap CSS -->
<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="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://asd.online/css/index.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>YeniPDF</title>
</head>
<body>
<div class="container">
<ul class="list-unstyled row" style="text-align:center;">
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="
a
" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
</ul>
</div>
</body>
</html>
i'm not using any specific css just bootstrap 4 this is js fiddle https://jsfiddle.net/ygoqmb14/2/
Try add min-height for .hizala class
.hizala {
min-height: 130px;
}
I'm currently working in a "Quote Machine" as part of freeCodeCamp projects. I'm trying to use a list to get three list items behaving as buttons, one next to the other by using the bootstrap class "in-line" however it is not working since each of the li occupy one row. This is my code so far with no CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css"
integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Random Quote Machine</h1>
<h5>WARNING: These quotes might inspire you</h5>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="quote-box">
<p id="quote">Test quote</p>
<p id="author">Anonimous</p>
</div>
<ul class="col-md-12 list-inline">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
And this is the result in the browser:
list-inline not rendering
Thank you in advance for any feedback
You need the list-inline-item class on the items...
<div class="col-md-12">
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
https://www.codeply.com/go/uzJ5wlWfr0
Also, the UL should go inside the col-md-12. See the Bootstrap Documentation.
I'm pretty new Bootstrap 4, so there might be lots of mistakes here.
I want to create a responsive navbar which collapses my 4 menu buttons but still keeping the search bar to its right. I'm not sure yet how to deal with the display of the buttons after expanding, but my goal for now is to keep the search bar to the right with a correct width.
When the screen gets "small", the nav-toggle button shows up, collapsing the menu buttons. That's cool. But the search bar just grows off the container its in. How do I keep it within the container?
I appreciate any suggestions and improvements :)
nav {
background: brown;
}
nav .container {
white-space: nowrap;
}
<head>
<!-- Meta tags -->
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<nav class="navbar sticky-top navbar-inverse navbar-toggleable-sm">
<div class="container" style="width:1400px">
<div class="d-inline-block">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
<span class="fa fa-home"> Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-music"> Music</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-info"> About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa fa-address-card"> Contact Us</span>
</a>
</li>
</ul>
</div>
<form class="d-inline-block w-100" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search by artist or album name">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
EDIT: I tweaked around a little and got the following result -> https://jsfiddle.net/Taliesin84/qL35nejo/
My current objective is to prevent the Search bar from wrapping bellow the collapsed buttons when the size gets too small.
I also need to make the Search Bar wider in larger screen sizes, but that's secondary for now. Any new ideas?
From an example contained in Bootstrap 4's github repo:
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>