Mixing
How to fix this nav-bar issue with content section in Bootstrap 4
up vote
-3
down vote
favorite
I am trying to keep nav-bar white inside container so it will have the same width as content. But I have 2 troubles which can't figure out how to fix.
- I set section's full width and full height with gradient but as you might see bellow part is out of the gradient. How can I make that gradient background full view port?
- I set nav-bar inside the container so it can have the same width as content bellow it. But I want to place nav-bar inside the same gradient background. The problem is that I can't place nav-bar inside the section because I am using Angular and Nav-bar component is in the other file.
Are there any solutions for these 2 troubles?
I am adding the link of code sample in the bellow comment:
css twitter-bootstrap css3 bootstrap-4
asked 12 hours ago
Artyom
648
add a comment |
up vote
-3
down vote
favorite
I am trying to keep nav-bar white inside container so it will have the same width as content. But I have 2 troubles which can't figure out how to fix.
- I set section's full width and full height with gradient but as you might see bellow part is out of the gradient. How can I make that gradient background full view port?
- I set nav-bar inside the container so it can have the same width as content bellow it. But I want to place nav-bar inside the same gradient background. The problem is that I can't place nav-bar inside the section because I am using Angular and Nav-bar component is in the other file.
Are there any solutions for these 2 troubles?
I am adding the link of code sample in the bellow comment:
css twitter-bootstrap css3 bootstrap-4
asked 12 hours ago
Artyom
648
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago
add a comment |
up vote
-3
down vote
favorite
up vote
-3
down vote
favorite
I am trying to keep nav-bar white inside container so it will have the same width as content. But I have 2 troubles which can't figure out how to fix.
- I set section's full width and full height with gradient but as you might see bellow part is out of the gradient. How can I make that gradient background full view port?
- I set nav-bar inside the container so it can have the same width as content bellow it. But I want to place nav-bar inside the same gradient background. The problem is that I can't place nav-bar inside the section because I am using Angular and Nav-bar component is in the other file.
Are there any solutions for these 2 troubles?
I am adding the link of code sample in the bellow comment:
css twitter-bootstrap css3 bootstrap-4
asked 12 hours ago
Artyom
648
I am trying to keep nav-bar white inside container so it will have the same width as content. But I have 2 troubles which can't figure out how to fix.
- I set section's full width and full height with gradient but as you might see bellow part is out of the gradient. How can I make that gradient background full view port?
- I set nav-bar inside the container so it can have the same width as content bellow it. But I want to place nav-bar inside the same gradient background. The problem is that I can't place nav-bar inside the section because I am using Angular and Nav-bar component is in the other file.
Are there any solutions for these 2 troubles?
I am adding the link of code sample in the bellow comment:
css twitter-bootstrap css3 bootstrap-4
css twitter-bootstrap css3 bootstrap-4
asked 12 hours ago
Artyom
648
asked 12 hours ago
Artyom
648
asked 12 hours ago
Artyom
648
asked 12 hours ago
Artyom
648
asked 12 hours ago
Artyom
648
648
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago
add a comment |
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Run code snippet below and choose "Full page" to see the result for larger screen.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>- Kind of hard to understand exactly what you wanted to do.
answered 12 hours ago
Tibbelit
629516
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Run code snippet below and choose "Full page" to see the result for larger screen.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>- Kind of hard to understand exactly what you wanted to do.
answered 12 hours ago
Tibbelit
629516
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
add a comment |
up vote
0
down vote
accepted
Run code snippet below and choose "Full page" to see the result for larger screen.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>- Kind of hard to understand exactly what you wanted to do.
answered 12 hours ago
Tibbelit
629516
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Run code snippet below and choose "Full page" to see the result for larger screen.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>- Kind of hard to understand exactly what you wanted to do.
answered 12 hours ago
Tibbelit
629516
Run code snippet below and choose "Full page" to see the result for larger screen.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>- Kind of hard to understand exactly what you wanted to do.
section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>section {
background: #2193b0; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top:5%;
width:100%;
/* New code */
height: 100%;
overflow: hidden;
padding-top: 80px;
margin-top: -80px;
}
.navbar {
position: relative;
background-color. rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
.nav-item{
margin:5px;
}
.signin, .signup {
border:2px solid;
}
.signin {
border-color:#232323 !important;
}
nav .nav-item ul li a.signin {
color:#232323;
}
.signin:hover {
background-color:#232323;
color:#ffffff;
}
nav .nav-item ul li .signin a :hover {
color:#ffffff;
}
.signup {
background-color:#44A423;
border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
font-size:23px;
padding:10px 20px;
}
.navbar-light .navbar-nav .nav-item.signup .nav-link {
color:#fff;
font-size:23px;
}
.emp-profile{
padding: 5%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img{
text-align: center;
}
.profile-img img{
width: 70%;
height: 100%;
}
.main-col h5{
color: #333;
}
.main-col h6 {
color: green;
margin-bottom:30px
}
.row-details {
margin-top:30px
}
.profile-tab label{
font-weight: 600;
}
.profile-tab p{
font-weight: 600;
color: green;
}
.img-content {
margin: 30px 15px !important
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-expand-md bg-faded ">
<a class="navbar-brand" href="#">
<img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
</a>
<button class="navbar-toggler" type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/home" >Item 1</a>
</li>
<li class="nav-item signin">
<a class="nav-link" routerLink="/sign-in" >Sign in</a>
</li>
<li class="nav-item signup">
<a class="nav-link" routerLink="/sign-up" >Sign Up</a>
</li>
</ul>
</div>
</nav>
</div>
<section>
<div class="container">
<div class="emp-profile justify-content-center">
<form method="post">
<div class="row">
<div class="col-md-4">
<div class="profile-img">
<img src="https://picsum.photos/50" alt="" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-12">
<div class="tab-content profile-tab" id="myTabContent">
<div class="row">
<div class="col-md-4 main-col col-sm-12 col-12 d-flex d-sm-block flex-column align-items-center">
<h5>
Kshiti Ghelani
</h5>
<h6>
24 Years Old
</h6>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>
</div>
<div class="col-md-2 col-sm-6 col-6">
<a href="#" class="btn button-image closeButton btn-message">Message</a>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Username</label>
<p class="ml-auto">Kshiti123</p>
</div>
<div class="col-6 d-flex">
<label>Profession</label>
<p class="ml-auto">Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Gender</label>
<p class="ml-auto">Female</p>
</div>
<div class="col-6 d-flex">
<label>Job Title</label>
<p class="ml-auto">UI Designer</p>
</div>
</div>
<div class="row">
<div class="col-6 d-flex">
<label>Country</label>
<p class="ml-auto">UK</p>
</div>
<div class="col-6 d-flex">
<label>City</label>
<p class="ml-auto">Oxford</p>
</div>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
<div class='col-md-3 img-content'>
<img src="https://picsum.photos/200" alt="" />
</div>
</div>
<div class="row">
<div class="col-md-10">
<p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
quo minim nostro ut.
</p>
</div>
</div>
</form>
</div>
</div>
</section>answered 12 hours ago
Tibbelit
629516
answered 12 hours ago
Tibbelit
629516
answered 12 hours ago
Tibbelit
629516
answered 12 hours ago
Tibbelit
629516
629516
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
add a comment |
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
Thanks for replying. I will check it now and let you know.
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
It looks working. Thank you so much!
– Artyom
12 hours ago
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371870%2fhow-to-fix-this-nav-bar-issue-with-content-section-in-bootstrap-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Here is the link: codepen.io/artyombaykov/pen/eQGjZq?editors=1100
– Artyom
12 hours ago
Question must contain a runnable Minimal, Complete, and Verifiable example. Not a link to a pen/fiddle/website you can later delete/modify, leaving the question irrelevant for future users. The main reason you're getting help is because your question might be useful for future users. Take that away and you take away the incentive to answer for the vast majority of Stack Overflow users. Please read How to Ask.
– Andrei Gheorghiu
12 hours ago
I know that. Code is too large for adding here. While I add such a code people ask for runable example where can they see problem instantly. Whatever you do someone like you will down vote and and write such a comment!
– Artyom
12 hours ago
How is a navbar code too large for Stack Overflow, Artyon? Do you know what minimal means? It means you remove any and all elements unrelated to the question. So you only include the navbar code, not your entire page. You could add 10 snippets containing Bootstrap v4 navbars and you still won't reach the char limit for a SO question. Anyways, I told you how you could improve your question and make it more answerable. Obviously, you are free to disregard my suggestion and do as you please.
– Andrei Gheorghiu
12 hours ago
I've already got an answer from other expert. Of course you can make a suggestion. I posted many questions many times people down vote only because I didn't write full code. As I said you can't make all community happy. Every time will appear someone to down vote and write wise a verse of your comment (Why there is not a full code).
– Artyom
12 hours ago