I'm currently using Bootstrap 4 to make my online portfolio. The only issue I have right now is that I cannot align a div vertically. I'm also adding a .png image that should flow over the vertically centered div. The image pushes the whole div down. What do I need to use to fix this issue?
This is the result I'm looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<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>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<div class="col-md-12" style="background-color: #F9DB0F;">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<img src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661" width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
this might help:
in style.css:
.bg {
background-color: #F9DB0F;
margin: 250px 0;
}
.div-center {
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px 0;
}
.my-pic {
position: absolute;
top: -200px
}
in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Berk's Online Portfolio</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>
<!-- style should be loaded after the bootstrap files -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-black static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/150x75">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="min-vh-100">
<div class="row">
<!-- I added a bg class -->
<div class="bg col-md-12">
<div class="container">
<div class="row">
<!-- I added a div-center class -->
<div class="center col-md-6">
<h1 class="display-1">HI</h1>
<h1 class="display-1">I'M BERK</h1>
<h5>A FULL STACK DEVELOPER AND UI/UX DESIGNER</h5>
</div>
<div class="col-md-6">
<!-- I added a my-pic class -->
<img class="my-pic"
src="https://entourageapp.s3-us-west-2.amazonaws.com/uploads/images/160/large/manWalkingFrontSuit.png?1440865661"
width="75%">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Related
This is how I want to align text:
And this is my navbar:
I've been trying for exactly 2 days to make this style, somehow I couldn't do it like on Max Back's site
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container bg-light mt-5">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<img src="assets/icon.jpg" width="48" height="48" class="rounded-circle" alt="">
<span>Emre İlhan</span>
<img src="assets/icons8-verified-account-20.png" alt="">
<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" id="navbarNav">
<ul class="nav nav-pills ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><span class="tex-black-50">01</span> Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">02</span> Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="tex-black-50">03</span> Link</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Try this code for navbar text-right
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand text-right" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
try this
<!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.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.img-container{
background-color: black;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgb(76, 76, 76);
}
.img{
border-radius: 50%;
width: 40px;
height: 40px;
}
.main{
display: flex;
}
.text{
margin-left: 5px;
padding: 3px;
}
</style>
<body>
<div class="main" >
<div class="img-container">
<img src="33720.jpg" class="img" alt="">
</div>
<div class="text">
<div>Emre Ihan <i class=" fa fa-check"></i></div>
<div style="color: gray;"><i class=" fa fa-check"></i>offical</div>
</div>
</div>
</body>
</html>
The issue is that when I click the navbar item it's not redirecting to the page and not giving any feedback. But when I delete the bootstrap.bundle.min.js it's working as it should be, but the expand button for the navbar when it's collapsed is not working.
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Document</title>
<style>
.nav{
margin-bottom: 0px !important;
margin-top: 0px !important;
}
</style>
</head>
<body>
<!--Heading Navbar-->
<header class="border-bottom site-header sticky-top bg-white">
<nav class="navbar navbar-light navbar-expand-lg bg-white">
<div class="container-fluid">
<div class="d-flex flex-grow-1">
<a href="#" class="navbar-brand col-md-3 bg-white">
<img src="logo.jpg" class="img-fluid">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navNavbar" aria-controls="navNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navNavbar" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a class="nav-link px-2 m-2 link-dark" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 m-2 link-secondary" href="contactus.html" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Content-->
<!--Necessary Scripts-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
The problem is the data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" on the navbar-collapse div. Remove it and the navigation will work fine.
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navNavbar" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
<ul class="navbar-nav ms-auto flex-nowrap">
...
</ul>
</div>
Demo
Also, jQuery is not required for Bootstrap 5
when i open my html file i don't find the collapse button on the navbar. The button for collapsing does not appear
here is my html code :
<!DOCTYPE html>
<html>
<head>
<title>BoostUp - Boostez vos projets</title>
<link href="/assets/css/boostrap/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/heroes.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/assets/img/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
BoostUp
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Référencement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Posts</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script src="./assets/js/jquery.js"></script>
<script src="/assets/js/booststrap/bootstrap.bundle.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="./assets/js/firestart.js"></script>
</body>
</html>
Ps : i'm on bootstrap 5
You forgot to include the toggler button.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Toggler
I am trying to create bootstrap navbar, but the toggle button does not work. I have used the class .sidebar-collapse on body tag, so the data should appear on the right side when I click on the toggle button. But this does not happen. Can someone tell me what is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/now-ui-kit.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<title>
Techversity
</title>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#pablo">
Techversity
</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navigation" aria-controls="navigation-
index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end"
id="navigation">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#pablo">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">Disabled</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-instagram"
aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo"><i class="fa fa-youtube-
play" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The markup is not correct. There shouldn't be a div.container nor a div.navbar-translate element inside the nav.navbar element. I tried it without them and it works. Also, you can check here that the markup isn't the one expected by Bootstrap.
i cant see bootstrap.min.js in your code:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
I have an Umbraco site that I'm integrating with Bootstrap. I've created a partial view with a navigation menu and everything seems to be working as intended with the exception of the navbar.
So when you click on the button it expands but immediately snaps back up. When you toggle it back, it almost 'pops into existence' and moves back up to close. Here is the entire output of the DOM
<html class="gr__localhost"><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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title></title>
<link rel="stylesheet" href="/css/master_styles.css">
<style>#media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pumpkin's Blog</h1>
<p>Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture </li>
</ul>
<p>I hope you stick around and comment. </p>
</div>
</div>
</div>
<div id="footer">
Copyright 2018
</div>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>
You are using bootstrap 3.3.7 js with bootstrap 4 css !
<html class="gr__localhost"><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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Pumpkin's Blog - Meow</title>
<link rel="stylesheet" href="/css/master_styles.css">
<style>#media print {#ghostery-purple-box {display:none !important}}</style></head>
<body data-gr-c-s-loaded="true">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNav" aria-expanded="false" style="height: 0px;">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pumpkin's Blog</h1>
<p>Hi! I'm Pumpkin. Welcome to my blog. I'm always posting things like</p>
<ul>
<li>Photos</li>
<li>Videos</li>
<li>Arts and Crafts</li>
<li>Structural Cardboard Architecture </li>
</ul>
<p>I hope you stick around and comment. </p>
</div>
</div>
</div>
<div id="footer">
Copyright 2018
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script id="wappalyzer" src="chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js"></script></body></html>