Make bs4 navbar in content box - javascript

So i have problem with bs4 navbar so lets explain more about the problem:
I have page with content box that have container and i want above of it to put the navbar i want to make somethink like this
But when i try to make it happend that:
So here is my html file
<title> {{ $title }} </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"/>
<body class="scrollbar-inner">
<div id="particles-js"></div>
#if(!Auth::user())
<script type="text/javascript">
$(window).on('load', function () {
$('#userLogin').modal('show');
});
</script>
#include('modals.login')
#endif
<div class="servername">
{{ $heading }}
</div>
<h1 class="ip" onclick="CopyToClipboard('to-copy')">
<div id="to-copy">{{ $main_ip }} <b class="fa fa-copy"></b></div>
</h1>
<div class="content-box">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<div class="maincontent-box">
</div>
<div class="sidebar">
#if(Auth::user())
<div class="dropdown userPane">
<button style="color:#000000; width: 111%; background: #D3D3D3" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<img src="http://cravatar.eu/head/{{ Auth::user()->username}}/128.png" width="32px;"
height="32px;"/> {{ Auth::user()->username }}
</button>
<div class="dropdown-menu" style="width: 111%">
<a class="dropdown-item">
<center>
<img src="http://cravatar.eu/head/{{ Auth::user()->username }}/128.png" width="32px;"
height="32px;"/>
</center>
</a>
<div class="dropdown-item">
<center>
Репутация: <span
class="badge badge-{{ Auth::user()->reputation == 10 ? 'success' : 'danger' }}">{{ Auth::user()->reputation }}
/10</span>
</center>
</div>
<div class="dropdown-item">
<center>В сървъра ли си?: <b>{{ Auth::user()->isLogged == 1 ? 'Да' : 'Не' }}</b></center>
</div>
<hr/>
<a class="dropdown-item" href="{{ url('/account/password') }}">
Смени парола
</a>
<a class="dropdown-item" href="#">
Нотификаций: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="#">
ични съобщения: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="{{ url('/logout') }}">
<center>Излез</center>
</a>
</div>
</div>
#endif
<div class="side">
<h5 class="boxes-title">Навигация <b class="fa fa-compass"></b></h5>
<div class="card">
<div class="card-body">
<a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}"><b
class="fa fa-home"></b>
Начало</a>
<br>
<a href="{{ url('/shop') }}" class="{{ request()->is('shop') ? 'active' : '' }}"><b
class="fa fa-shopping-cart"></b> Магазин</a>
<br>
<a href="{{ url('/bans') }}" class="{{ request()->is('bans') ? 'active' : '' }}"><b
class="fa fa-gavel"></b> Банлист</a>
<br>
<a href="{{ url('/support') }}" class="{{ request()->is('support') ? 'active' : '' }}"><b
class="fa fa-question"></b> Поддръжка</a>
<br>
<a href="{{ url('/apply') }}" class="{{ request()->is('apply') ? 'active' : '' }}"><b
class="fa fa-file-o"></b> Кандидатури</a>
<br>
<a href="{{ url('/top-voters') }}" class="{{ request()->is('top-voters') ? 'active' : '' }}"><b
class="fa fa-thumbs-up"></b> Топ гласуващи</a>
<br>
</div>
</div>
</div>
<div class="side">
<iframe style="width: 300px;"
src="https://discordapp.com/widget?id=511173991168344069&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="{{ asset('js/application.js') }}"></script>
</body>
</html>
My css file:
body {
font-family: 'Oswald', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: rgba(0, 0, 0, 0.77);
}
a:hover {
color: #ffbd13;
}
.servername {
color: white;
text-align: center;
text-decoration: none;
font-size: 100px;
display: flex;
margin-top: 40px;
justify-content: center;
}
.ip {
color: white;
text-align: center;
text-decoration: none;
font-size: 24px;
margin-bottom: 50px;
justify-content: center;
}
#to-copy:hover {
cursor: pointer;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
max-width: 80rem;
margin: 0 auto;
background: white;
margin-bottom: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.active {
color: #ffbd13;
}
.news-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin: 30px;
}
.maincontent-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin-top: 6.6rem;
margin-left: 30px;
margin-bottom: 30px;
}
.boxes-title {
padding-bottom: 5px;
}
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
bottom: 520px;
margin-bottom: 10px;
background-color: lightgrey;
}
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
.userPane {
margin-bottom: 30px;
top: 0;
color: white;
right: 0;
width: 80%;
justify-content: center;
}
#media only screen and (min-width: 768px) {
.userPane {
width: 90%;
}
}
Please help me guys.. im trying to make it maybe 30 minutes without succedd! Thanks in advice!


hmm, maybe try with something like this :
<div class="content-box">
<div class="navbar_position" >
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="maincontent-box">
</div>
style:
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.navbar_position{
position: absolute;
width: 90%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
plunker: http://plnkr.co/edit/uJKmTlYZtSgRDSqGk27W?p=preview


Make sure you do like this
<html>
<head>
<!-- bootstrap css here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</head>
<body>
<div class="container">
<nav>
<!-- This is inside container because the header is on the left side container only. -->
<!-- nav src here: https://getbootstrap.com/docs/4.1/components/navs/ -->
</nav>
<!-- main content here -->
</div>
<div class="sidebar">
<!-- main content -->
</div>
<!-- bootstrap js here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</body>
</html>
I hope that this will give you an idea.

Related

BOOTSTRAP 5 Head and NAV Divs not extending fully to screen size properly

I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>

How to I create a centered title on my website with subtitles right justified using navbar

I want to create a title similar to this
.title-bar {
background-color: #48A6B8;
font-style: italic;
margin-bottom: 3%;
color: #fff;
display: flex;
position:relative;
}
.title {
text-align: center;
font-size: 36px;
line-height: 180%;
flex:1 0 auto;
background:rgba(0,0,0,.5)
}
.button{
position:absolute;
right:0;
top:0;
}
<div class="title-bar">
<div class="title">Title</div>
<div class="button">
<button class="buts">Whats Up</button>
</div>
</div>
Found from here:
Navbar with Title in center and buttons to right
and I am using the navbar bootstrap documentation instead.
Found here:
https://getbootstrap.com/docs/4.0/components/navbar/
How do I create a centered title with menu buttons on the right side as well without having it look like this.
I am using the navbar bootstrap documentation because I want the navbar to work for mobile as well. Is it possible to accomplish this using the navbar from bootstrap 4.0?
My current code can be found below:
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
padding-top: 68px;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mx-auto">
<h2 class="navi">Title</h2>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
and the output of it is:
I am wondering how I can make the Title centered and the About Us/Our Product/Our Vision can still work as buttons

Is that what you want?
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="style2.css" />
<style>
#import url("https://fonts.googleapis.com/css2?family=Arvo:wght#700&display=swap");
body {
background-color: #e9d4d0;
}
.navbar {
font-family: "Arvo", serif !important;
background-color: #c8a36d;
}
.nav-item {
padding-left: 8px;
padding-right: 8px;
}
#title {
/* width: 100vw;*/
height: 100vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<h2 class="navi m-0 col-8 text-center">Title</h2>
<div class="col-4 text-end">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Our Vision</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<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>
</body>
</html>

Typewriter making div move on smaller devices

I am facing a problem, on smaller devices the div is moving as the script writes the text, and this is terrible, if I browse the website, the screen is moving. Is the problem with the CSS configuration? I've seen a lot of websites use typewriter and none of that happens, I really don't know how to fix it, I've tried using position but I haven't been successful
Could someone please help me with this? When using the browser developer tool you can see the problem, the screen moves when the script writes
<!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.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.box section div {
color: rgb(255, 255, 255);
margin: 35px 0px;
}
.section {
width: 100%;
padding: 135px;
height: 100%;
}
.text {
display: flex;
justify-content: space-around;
align-content: center;
}
#app {
font-size: 38px !important;
letter-spacing: 0;
line-height: 34px;
padding-bottom: 24p;
}
#media (max-width:500px) {
.box section div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
.bg-black {
background-color: #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="box bg-black">
<section class="section">
<div>
<div class="text">
<div id="app">
</div>
</div>
</div>
</section>
</div>
<div>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/typewriter-effect#latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(1500)
.typeString('I am ')
.pauseFor(400)
.typeString('<strong>Developer</strong>')
.pauseFor(1500)
.deleteChars(9)
.typeString('<strong>Designer</strong>')
.pauseFor(1000)
.deleteChars(8)
.typeString('<strong>Sculptor</strong>')
.pauseFor(1000)
.deleteChars(8)
.pauseFor(1000)
.start();
</script>
</body>
</html>

As per my understanding, You gave padding in section class. That's why your div is moving in smaller screens.
Please remove padding from section class Or you can give padding in percentage instead of pixels and remove display: flex from media query.
.section {
width: 100%;
padding: 0;
height: 100%;
}
#media (max-width:500px) {
.box section div {
justify-content: center;
align-items: center;
flex-direction: column;
}
}
Complete example
<!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.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.box section div {
color: rgb(255, 255, 255);
margin: 35px 0px;
}
.section {
width: 100%;
padding: 10%;
height: 100%;
}
.text {
display: flex;
justify-content: space-around;
align-content: center;
}
#app {
font-size: 38px !important;
letter-spacing: 0;
line-height: 34px;
padding-bottom: 24p;
}
#media (max-width:500px) {
.box section div {
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
}
.text {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
.bg-black {
background-color: #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="box bg-black">
<section class="section">
<div>
<div class="text">
<div id="app">
</div>
</div>
</div>
</section>
</div>
<div>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
<br>
<h3>Some text</h3>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/typewriter-effect#latest/dist/core.js"></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(1500)
.typeString('I am ')
.pauseFor(400)
.typeString('<strong>Developer</strong>')
.pauseFor(1500)
.deleteChars(9)
.typeString('<strong>Designer</strong>')
.pauseFor(1000)
.deleteChars(8)
.typeString('<strong>Sculptor</strong>')
.pauseFor(1000)
.deleteChars(8)
.pauseFor(1000)
.start();
</script>
</body>
</html>

How to correctly align LI classes in Bootstrap?

Just started coding everything from scratch ad hit a bit of a road block.
Struggling to get the glyphicons aligned to the top of the div on the left hand side and cant figure out where I am going wrong.
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>B01 Media- Admin Panel</title>
<!-- Bootstrap -->
<link href="../css/animate.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/magnific-popup.css" rel="stylesheet" />
<link href="../css/owl.carousel.css" rel="stylesheet" />
<link href="../css/owl.theme.css" rel="stylesheet" />
<link href="../css/preload.css" rel="stylesheet" />
<link href="../css/responsive.css" rel="stylesheet" />
<link href="../css/YTPlayer.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="admin.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation Area</h1>
<ul>
<li class="link">
<a href="Index.html">
<span class="glyphicon glyphicon-th" aria-hidden="true"></span>
<span>Dashboard</span>
</a>
</li>
<li class="link">
<a hef="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span>Articles</span>
<span class="label label-sucess pull-right">20</span>
</a>
<ul class="collapse collapsable" id="collapse-post">
<li>Create New</li>
<li>View Articles</li>
</ul>
</li>
<li class="link">
<a hef="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable" id="collapse-comments">
<li>
<a href="Approved.html">Approved
<span class="label label-success pull-right">10</span>
</a>
</li>
<li>
<a href="Unapproved.html">Unapproved
<span class="label label-warning pull-right">10</span>
</a>
</li>
</ul>
</li>
<li class="link">
<a href="commenters.html">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<span>Comments</span>
</a>
</li>
<li class="link">
<a href="tags.html">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
<span>Tags</span>
</a>
</li>
<li class="link">
<a href="Settings.html">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span>Settings</span>
</a>
</li>
</ul>
</div>
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-5">
<input type="text" id="header-search-field" placeholder="Search for anything" />
</div>
<div class="col-md-7">
<ul class="pull-right">
<li class="welcome">Welcome to your administration area</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label label-warning">3</span>
</a>
</li>
<li class="fixed-width">
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label label-message">3</span>
</a>
</li>
<li>
<a href="#" class="logout">
<span class="glyphicon glyphicon-logout" aria-hidden="true"></span>
logout
</a>
</li>
</ul>
</div>
</header>
</div>
<div class=row>
<footer id="admin-footer" class="clearfix">
<div class="pull -left"> Copyright 2017</div>
<div class="pull-right"> B01 Media- Blog Admin Panel</div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</html>
CSS
html, body {
font-family: "open sans", "helvetica neue",Arial, Helvetica, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 3px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
height: 100%;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header #header-search-field {
padding-top: 17px;
vertical-align: central;
border: none;
width: 300px;
outline: none;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul glyphicon {
color: #676a6c;
}
.label-message {
background-color: #1ab394;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
#nav-header ul .label {
position: absolute;
margin-top: -10px;
margin-left: -5px;
}
#nav-header .fixed-width {
width: 35px;
}
#admin-footer {
position: absolute;
width: 100px;
bottom: 0px;
background-color: #fff;
padding: 10px;
font-size: 12px;
color: #676a6c;
}
Help much appreciated.

Try taking height: 100%; off of #side-menu h1. This will put your glyphicons inside the navigation area box instead of below it
#side-menu h1 {
height: auto;
}

How to prevent bootstrap navbar buttons from stacking

I'm trying to design a responsive page.
This is how it looks like in a wide browser.
It changes to the ff. when I make it narrow:
What I want to happen is this:
This is my code for it:
/**For Eample Only So the Icons are Visible*/
.navbar-ct-blue {
background: #1B96BF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-piggy" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-cash" style="color: white;"></i>
</a>
</li>
<li class="navbar-nav">
<a href="#">
<i class="pe-7s-wallet" style="color: white;"></i>
</a>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
I have looked at these links, but I couldn't find the answer. Please help.
How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon
How to prevent a bootstrap navbar from collapsing when window resizing
Centering navbar buttons in bootstrap

You're seeing this happen since the nav-justified class only uses display:table-cell above 768px:
#media (min-width:768px) {
.nav-justified > li {
display: table-cell;
width: 1%
}
Here are two examples that solve this:
Using nav-justified:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
max-height: 50px;
line-height: 30px;
margin: 0;
}
.navbar.navbar-ct-blue .nav-justified > li {
display: table-cell;
width: 1%
}
.navbar.navbar-ct-blue .nav-justified > li > a {
color: white;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-justified > li > a:hover {
color: #00F2FF;
background: none;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav nav-justified">
<li>
<a href="#">
<span class="pe-7s-piggy"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-cash"></span>
</a>
</li>
<li>
<a href="#">
<span class="pe-7s-wallet"></span>
</a>
</li>
</ul>
</div>
</nav>
Using the Grid:
.navbar.navbar-ct-blue {
background: #1B96BF;
border: 1px solid #1B96BF;
margin: 0;
}
.navbar.navbar-ct-blue .nav-row span {
color: white;
padding: 20px 0;
font-size: 30px;
}
.navbar.navbar-ct-blue .nav-row span:hover {
color: #00F2FF;
}
<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation">
<div class="container">
<div class="row nav-row text-center">
<div class="col-xs-4">
<span class="pe-7s-piggy"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-cash"></span>
</div>
<div class="col-xs-4">
<span class="pe-7s-wallet"></span>
</div>
</div>
</div>
</nav>

To give the <li class="navbar-nav"> is obviously wrong. Removing that could fix it. Additionally, as Tasos said inline-block for the list item should do it. Sure, look in the corresponding media query.

Categories

Resources