I am creating a navbar with icons (svg icons).
What is the best way to achieve this with Bootstrap 4?
This is what I want:
This is the closest I've achieved (without giving a fixed size to my icons or the link) is:
<div class="row justify-content-center">
<div class="col-sm-10">
<nav class="navbar d-flex align-items-end">
<a class="navbar-item active" href="#">
<img src="../images/icons/icon-type-blue.svg">
Type</a>
<a class="navbar-item" href="#">
<img src="../images/icons/icon-size-lightgrey.svg">
Size</a>
<a class="navbar-item" href="#">
<img src="../images/icons/icon-fitting-lightgrey.svg">
Fitting</a>
<a class="navbar-item" href="#">
<img src="../images/icons/icon-results-lightgrey.svg">
Results</a>
</nav>
</div>
</div>
Using the following CSS:
.navbar{
padding: 2em;
border-bottom: solid 2px #00588A;
}
.navbar a{
font-size: 1.25em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: #ccc;
}
.navbar a.active{
color: #00588A;
}
.navbar a img{
margin-bottom: 0.75em;
}
Maybe I'm not integrating the right way?
Is giving the link a fixed size the best way?
Try This Code.
<div class="row justify-content-center">
<div class="col-sm-12">
<nav class="navbar d-flex align-items-end">
<div class="col-sm-3">
<a class="navbar-item active" href="#">
<img src="../images/icons/icon-type-blue.svg">Type</a>
</div>
<div class="col-sm-3">
<a class="navbar-item" href="#">
<img src="../images/icons/icon-size-lightgrey.svg">Size</a>
</div>
<div class="col-sm-3">
<a class="navbar-item" href="#">
<img src="../images/icons/icon-fittinglightgrey.svg">Fitting</a>
</div>
<div class="col-sm-3">
<a class="navbar-item" href="#">
<img src="../images/icons/icon-resultslightgrey.svg">Results</a>
</div>
</nav>
</div>
</div>
There are classes for icons in bootstrap search and check them out use these classes in a span element for example <span class="caret"></span> this will result in a drop-down icon and there is more icons just check them out
Ok my second option why don't you create your own icon class for example .icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; }
You can have a more detailed answer in here How to add custom icon in Twitter Bootstrap?
Related
I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.
By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm
Please note that to simplify the code I removed some list items but they all have class="footerstyle"
This is what the list currently looks like:
This is what I want it to look like however they have to be in the centre of a bootstrap grid:
This is my code:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer {
position: relative;
}
.list-unstyled {
margin-bottom: 20px;
}
.footerstyle {
font-size: 18px;
text-align: center;
}
.footerstyle:hover {
border-radius: 25px;
text-align: center;
border-bottom:solid 1px transparent;
}
.dropright {
flex-wrap: wrap;
}
.col-md {
height: 200px;
display: flex;
}
<div class='footer'>
<footer class="page-footer font-small pt-4">
<div class="row">
<div class="col-sm">
<ul class="list-unstyled">
<div class="col-sm">
</div>
<div class="col-sm">
<li class="footerstyle">
<a>Homepage</a>
</li>
</div>
<div class="col-sm">
<div class="dropdown footerstyle">
<a class="footer-dropdown dropdown-toggle" id="dropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Team
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" >Team members</a>
<a class="dropdown-item" >Our Story</a>
<a class="dropdown-item" >Join the team</a>
</div>
</div>
</div>
</ul>
</div>
<div class="col-sm socialmedia">
<a href="">
<img src="linkedin.png">
</a>
<a href="">
<img src="twitter.png">
</a>
</div>
<div class="col-sm cookies">
A
</div>
</div>
<div class="footer-copyright text-center py-3">
<a> B </a>
</div>
</footer>
</div
The other items in the footer are in the right place and don't have this problem as they aren't list items. How can I make it so that the list items align to the left whist still being on the centre of the bootstrap grid?
To align text left just add this code to your css:
.page-footer a {
text-align:left;
}
Imagen de un diseno en UPlabs
Hi im trying to make a navbar like this but i cant finish it.
someone can help me? Only want to know how round the border of links when they are active
Now i have this resolved, but i dont know how round borders on the container of the links like we see in the design of UpLabs
Image of my project
HTML
<div id="navbar" class="sticky-top">
<div class="d-flex flex-wrap justify-content-center align-content-center" style="height: 20%;">
<img class="{{url}}" alt="">
</div>
<nav class="nav flex-column ml-4">
<a id="link" routerLink="sales" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-cash-register"></i>
</div>
<div class="col-9">
Ventas
</div>
</div>
</a>
<a id="link" routerLink="debtors" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-user-friends"></i>
</div>
<div class="col-9">
Deudores
</div>
</div>
</a>
<a id="link" routerLink="balance" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-chart-line"></i>
</div>
<div class="col-9">
Balance
</div>
</div>
</a>
<a id="link" routerLink="products" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-boxes"></i>
</div>
<div class="col-9">
Productos
</div>
</div>
</a>
</nav>
</div>
and this is the file CSS that round borders of links when they are active and other parts of desing.
div#navbar {
left: 0px;
width: 100%;
height: 100vh;
border-radius: 0 40px 40px 0;
background: #f4755f;
}
a#link {
font-size: 18px;
padding: 20px 0;
color: white;
}
.active {
background: #fbf3f2;
color: #f4755f !important;
border-radius: 30px 0 0 30px;
}
img {
width: 45%;
height: 70%;
}
Making the border of a link round is done like that:
html:
Link 1
css
a {
background: red;
border-radius: 10px 0px 0 10px;
}
To make it round only when it is active you need to add a class to the active link and style that instead of the a tag, though.
I want to add two logos to my bootstrap navbar, but I also want them to be responsive (i.e. I want them to get smaller, not stacked when I decrease the screen size). Here's the navbar code I have been working on-
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" src="img/image.png">
</a>
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="img/image2.png">
</a>
</div>
</div>
</nav>
Any help would be greatly appreciated!
I have created the example of having two logo side by side.
Please check the working example at CODEPEN
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav-header">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive">
</a>
</div>
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png">
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
I hope it helps you
Enjoy :)
The 'img-reponsive' class should help you.
<img alt="Brand" id="brand1" src="img/image.png" class="img-responsive">
Hope it helped you :)
I would like to position my image inside the navbar and my name on the right of the image. Here's my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
You can use Flexbox on .navbar-brand and reduce padding a little bit
.navbar-default .navbar-brand {
display: flex;
align-items: center;
padding: 5px;
}
.navbar-brand img {
height: 100%;
margin-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
I have a solution without flex. You just need to setup some attributes for .navbar-brand and .navbar-brand>img.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-brand {
height: auto;
}
.navbar-brand>img {
display: inline-block;
padding-right: 10px;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
Why not use a media object here?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">
</a>
</div>
<div class="media-body media-middle">
<h4 class="media-heading">Luckycharm-boy</h4>
</div>
</div>
</div>
</div>
</nav>
An another way which I prefer is - create a whole "row" div in full nav bar without nav-header , then you can fully control the positioning of img and text location in various screen sizes for mobile as well as large screens. Then you can give various col (columns) sizes and write in that .
I am saying this as it will help you to place it in any location
Easy fix would be using span. Check this out. DEMO here.
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-logo" href="#">
<span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span>
luckycharm-boy
</a>
</div>
</nav>
CSS:
a.navbar-logo {
color: #666666;
}