How to center text vertically within bootstrap container - html

I'm trying to center text vertically within a div bootstrap container. This is my sample HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.vcenter {
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter ">
<ul class="list-inline vcenter" >
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
</ul>
</nav>
</div>
</body>
</html>
I would like the menu text centered vertically within the container, but they are hugging the top. How would I do this?
I worked on this last night and this is what I came up with:
My goal using Bootstrap, was to have a series of menu links running horizontally across the page. For some reason, doubtless due to my ignorance, this proved rather difficult. I did come up with a solution. At least this seems to work, OK. HOWEVER, in order to make the horizontal menu items appear vertically centered within the container, I had to add margin-top: 3px to the class view. This feels kind of fake to me, but whatever works works, I guess. Any comments are appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<style>
.view {
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="Jumbotron">
<h1 class="text-primary text-center">Using Bookstreap.js</h1>
<hr>
</div>
<nav class="navbar navbar-default view ">
<div class="container-fluid view">
<div class="row">
<div class="col-lg-10 col-lg-offset-10 view" >
<ul class="list-inline view" >
<li class="view">Menu 1</li>
<li class="view">Menu 1</li>
<li class="view">Menu 2</li></li>
<li class="view">Menu 3</li>
<li class="view">Menu 4</li>
<li class="view">Menu 5</li>
<li class="view">Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
<div>


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
{
display: inline-block;
vertical-align: middle;
float:none;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default vcenter " >
<div class="container-fluid vcenter">
<div class="col-lg-5 col-lg-offset-5" >
<ul class="list-inline vcenter" >
<div>
<li class="menuFont">Menu 1</li>
<li class="menuFont ">Menu 2</li>
<li class="menuFont ">Menu 3</li>
<li class="menuFont ">Menu 4</li>
<li class="menuFont ">Menu 5</li>
<li class="menuFont ">Menu 6</li>
<li class="menuFont ">Menu 7</li>
<div>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>

Related

Is it possible to reposition the Cognigy WebChat toggle button in an <li> tag?

I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TestWebsite</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>
<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
initWebchat(
"https://endpoint-trial.cognigy.ai/1344d45dff864bfb0627d205f7f8835026ab24d0d27384ffabd4740a9c1023b2"
)
</script>
</li>
</ul>
</div>
</nav>
</body>
</html>
I need it to be positioned in an <li> after <li>Page 3</li>

Problems with floating a list inside a div

I'm trying to float a ul inside a div and nothing seems to be working. Am I missing something?
Is there a problem with me using flexbox? I've tried different selectors like .menu ul{} and have given the ul a class but nothing seems to be working.
I have also tried to get rid of the div elements nested inside the ul, but that didn't fix the problem.
Tried assigning a display: block to the menu div as well as a height and width but that didn't do anything.
I'm sure there is something obvioues that I'm missing but I can't figure it out.
Thanks a lot!
$primaryColor: #75beff;
$secondaryColor: #7c3702;
*{
box-sizing: border-box;
}
body {
margin: 0;
height:100%;
font-family: 'Roboto', sans-serif;
}
ul {
list-style: none;
}
.header {
background: $primaryColor;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
}
.menu-list {
float: left;
}
.drop-down{
visibility: hidden;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<title>Ecommerce website</title>
</head>
<body>
<div class="header">
<div class="logo"><span class="logo-text">My Fabulous store</span>
</div>
<div class="menu">
<ul class="menu-list">
<li class="main-categ">Femei</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Barbati</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Copii</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
<li class="main-categ">Altele</li>
<div class="drop-down">
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
</div>
</ul>
</div>
<div class="icons">
<a href="#!">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="#!">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
</div>
<div class="main">
</div>
<div class="footer">
</div>
</body>
</html>

#K.C. and #MarsAndBlack have given the right solutions:
If you just want the list inside, then ignore the last comment and try .menu-list { display: flex; align-self: flex-start;}
The problem was mixing floats and flex.
Thank you all for your help

Highlight only the selected item

I'm doing a drop-down list where, when I hover over a specific element, I should highlight only the selected one, unfortunately the whole list is highlighted in my mind, I know the problem is that in one li there is also a new list to make a drop down menu, Unfortunately, I can not deal with it. It's actual result jsfiddle code
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li class="teset">Type of driving</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS:
.sub_list, .sub_sub_list {display:none;}
li:hover{
background-color:red;
}
My JS
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});

Try using anchor for hover instead of li. It will be simplest and easiest solution. While you can play with code if you want complicated solution...
See below snippet.
$(".sub_list").slideUp();
$(".parent_click").click(function() {
$(".parent_click").not(this).next().slideUp()
$(this).closest(".parent").find(".sub_list").slideToggle();
return false;
});
$(".sub_click").click(function() {
var elem = $(this).next()
$(".sub_sub_list").not(elem).slideUp();
$(this).closest(".test").find(".sub_sub_list").slideToggle();
});
.sub_list, .sub_sub_list {display:none;}
a:hover{
background-color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li class="parent">
<a class="parent_click">Driving</a>
<ul class="sub_list">
<li class="test">
<a class="sub_click">Type of Car</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="test">
<a class="sub_click">Tracks</a>
<ul class="sub_sub_list">
<li><a>List 1</a></li>
<li><a>List 2</a></li>
<li><a>List 3</a></li>
</ul>
</li>
<li class="teset"><a>Type of driving</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

Zurb Foundation6 dropdown menu

I'm using zurb foundation's dropdown menu. I need the dropdown lists to display as inline-block. So far, I haven't any foundation rules that do this. I need help
<html>
<head>
<!--foundation styles-->
<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>Item One
<ul class="menu">
<!-- I want to display the lists here as inline
block-->
<li>Item One A</li>
<!--more Links-->
</ul>
</li>
<li>Item Two</li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>

My html bootstrap sidebar item just won't drop down

Currently trying to create a simple dropdown sidebar using bootstrap.
Below is my code in html:
<html>
<head>
<title>Sidebar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<link type="text/css" rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
Here is my common.css:
.row{
background-color:#ffff99;
border:2px solid black;
}
The sidebar won't drop down when I click Item 1 or Item 2. Any idea what went wrong?

Have a look at the basic template on the Bootstrap site
http://getbootstrap.com/getting-started/#template
At the bottom of the HTML block they have referenced two javascript files which you are missing.

You need to include the jquery.js and bootstrap.js.

The dropdowns work with JavaScript, so you need to include that. Try to add bootstrap.min.js to your application by adding
<script src="bootstrap.min.js" type="text/javascript"></script>
to the head section of your page, or just before the closing </body>-tag of the page.
Additionally, you need to add jQuery, which is done the same way, but make sure you include it before the bootstrap script.

Your dropdowns work with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
background-color: #ffff99;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">
Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">
Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
</html>