I'm creating an account page (header) for the first time, and I notice that some of the icons will not align perfectly with the text. I know how simple and easy this is for advanced developers, but I'm just starting off and really need some advice.
I have tried using padding and margin as a style element but didn't work.
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="row">
<div class="col-sm-3">
<img src="paylocity_logo.png" alt="logo" style="width:100%"S/></a>
</div>
<div class="col-sm-9 hidden-sm hidden-xs" id="project-details">
<a class="home-link" href="" title="Edit"> <i class="material-icons"> home </i> </a>
<div class="project">
User Profile
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right" id="account">
<i class="material-icons">account_circle</i> <span>Tom Markart </span>
<div id="account-options">
<ul>
<li>
<span> <i class="material-icons">account_circle</i></span>View Profile
</li>
<li>
<span class="fa fa-cog"></span>Settings
</li>
<li>
<span class="fa fa-bug"></span>Report a Bug
</li>
<li>
<span class="fa fa-power-off"></span>Log Out
</li>
</ul>
</div>
</div>
</div>
</header>
I want to make them straight.
In your case, you can add the following rule:
.material-icons {
vertical-align: middle;
}
https://codepen.io/anon/pen/EBBbpd
Using flex:
Wrap text in <span> and a wrapper class to <a>.
...
<li>
<a class='wrapper' href="javascript:void(0);">
<span class="fa fa-cog"></span>
<span>Settings</span>
</a>
</li>
...
.wrapper {
display: flex;
align-items: center
}
Related
I have a component named admin.component, in this component, I have a menu and a header.
In fact, when I create a new page, for example: the currency page.
The title is at the bottom of the la page, I don't understand why?
Normally, the title must be at the top...
I think that the component admin.component.html isnt't correct?
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
</section>
For the currency.component.html page, I have this:
<div class="home-content">
<h1 style="text-align: center">Currency Page</h1>
</div>
The code is available here, if you wish.
It's working now need to change in admin.component.html with below stracture and resolved issue easily
<router-outlet>
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
<router-outlet></router-outlet>
</section>
</router-outlet>
only add <router-outlet></router-outlet> after </nav> tag and check upper code so you will get idea how to implement
Top Header is now fixed and only content will be change like below ss
I have developed a site on angular. All things are working fine. Now I want to adjust the footer.
Actual Footer
Expected Footer
Code
<footer>
<div class="row">
<div class="col-12">
<img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
</div>
<div class="col-md-3 col-12">
<p>
<b>Manufactured by:</b>
</p>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="nav-menu">
<li>
<a [routerLink]="['/']">Home</a>
</li>
<li>
About us
</li>
<li>
Faqs
</li>
<li>
<a [routerLink]="['/latest-recipes']">recipes</a>
</li>
<li>
<a [routerLink]="['/stores']">Stores</a>
</li>
<!-- <li>
<a [routerLink]="['/where-to-buy']">where to buy</a>
</li> -->
</ul>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="px-0">
<li>Privacy & Policy</li>
<li>Terms & Condition</li>
</ul>
</div>
<div class="col-md-3 col-12">
<h1>Karachi Office</h1>
<p></p>
<h1>Lahore Office</h1>
<p></p>
<div class="social-icon d-flex align-items-center">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="col-md-2 col-12">
<img src="../../assets/img/ebs.png" class="img-fluif" />
</div>
</div>
</footer>
How can I align the footer? Any help would be highly appreciated.
You've made the image col-12 which will make the image spread across the full container. Remember that in bootstrap each container is split into 12, so saying that the image covers col-12 will cover all of them. From the looks of it you want to try around col-2.
Alternatively you could achieve the same without Bootstrap. Put the logo/manufactured by links in one div and float them left. Place the rest of the content in another div and float them right.
Add and Remover mt-3(margin-top) from the div.
Let me start of by saying that I am new to this. I have some code from a template that I am using. On the menu drop down there is a list of the links to other pages and next to it is an image. What would I need to add to make the image change to another image when you hover over each of the links?
Here is the code.
<li class="menu-item-has-children megamenu">
<a href="#">
<span class="link-icon"></span>
<span class="link-txt">
<span class="link-ext"></span>
<span class="txt">
Equipment
<span class="submenu-expander">
<i class="fa fa-angle-down"></i>
</span>
</span>
</span>
</a>
<ul class="nav-item-children">
<li>
<div class="container megamenu-container">
<div class="vc_row row megamenu-inner-row bg-white p-0">
<div class="container ld-container">
<div class="row ld-row">
<div class="megamenu-column col-md-3 py-md-3 px-md-4">
<div class="megamenu-column-inner pl-md-4 py-md-4">
<ul class="lqd-custom-menu reset-ul font-size-15 lh-2 ltr-sp-025 font-weight-medium">
<li>
<i class="fa fa-angle-right mr-2"></i>Vertical Cartoners
</li>
<li>
<i class="fa fa-angle-right mr-2"></i>Horizontal Cartoners
</li>
<li>
<i class="fa fa-angle-right mr-2"></i>Pre Made Pouch Machines
</li>
<li>
<i class="fa fa-angle-right mr-2"></i>Case Packers
</li>
<li>
<i class="fa fa-angle-right mr-2"></i>Rigid Container Fillers
</li>
<li>
<i class="fa fa-angle-right mr-2"></i>Carton Sleeve Wrappers
</li>
</ul>
</div><!-- /.megamenu-column-inner -->
</div><!-- /.megamenu-column -->
<div class="megamenu-column col-md-3 bg-cover bg-center" data-responsive-bg="true">
<img class="invisible" src="./img/equipment/vertical-cartoner.jpg" alt="Megamenu Image">
</div><!-- /.megamenu-column -->
</div><!-- /.row ld-row -->
</div><!-- /.container ld-container -->
</div><!-- /.vc_row -->
</div><!-- /.megamenu-container -->
</li>
</ul>
</li>
I would use scripting for this kind of thing
$(document).ready(function(){
$('#op1').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op1")')
});
$('#op2').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op2")')
});
$('#op3').hover(function(){
$('#image').css('background-image','url("https://via.placeholder.com/150.png?text=op3")')
});
});
#image{
background-image: url("https://via.placeholder.com/150");
border: 1px solid black;
width: 150px;
height: 150px;
}
#op1, #op2, #op3{
padding: 5px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image"></div>
<div id="op1">hover for op1</div>
<div id="op2">hover for op2</div>
<div id="op3">hover for op3</div>
Find this in your css stylesheet
.megamenu .link-icon {
...
}
Add the next lines right after it for a mouse-over effect. Sorry for the dots. For reason that your current css is unknown it is not possible to give the full solution.
.megamenu > a:hover .link-icon {
...
}
I have included a sidebar in one column and 3 thumbnails in another 3 columns in a row. The thumbnail image is fitting the entire columns at first but when I resize the thumbnail images are getting smaller keeping the column in full width (as for usual bootstrap responsive works). I need to stretch my images as that of the column they are filled in.
Here's my HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid side-navigation-bar">
<div class="row">
<!--==========================================-->
<!--Side navigation bar-->
<!--==========================================-->
<div class="col-md-3 col-md-3-thumbnail">
<div class="nav-side-menu" >
<div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list" >
<ul id="menu-content" class="menu-content collapse out" >
<li>
<a href="#">
<i class="fa fa-home fa-lg fa-fw"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg fa-fw"></i> My Appointments
</a>
</li>
<li>
<a href="#">
<i class="fa fa-s15 fa-lg fa-fw"></i> Facilities
</a>
</li>
<li>
<i class="fa fa-cogs fa-lg fa-fw"></i> Services
</li>
<li>
<i class="fa fa-stethoscope fa-lg fa-fw"></i> Doctors
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==========================================-->
<!--End of Side navigation bar-->
<!--==========================================-->
<!--==========================================-->
<!--Cards-->
<!--==========================================-->
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
</div>
</div>
I even tried the width:100% for the thumbnail image as
.thumbnail > img{width:100%; display:block;}
The problem is, the img is not taking the full-width as that of its column
Can anyone please help me???
Used .img-fluid for responsive image in Bootstrap.4. it have following css:
.img-fluid {
max-width: 100%;
height: auto;
}
https://getbootstrap.com/docs/4.0/content/images/
You can just set the width to 100% and the height to auto, this will expand it to full width.
CSS:
.thumbnail > figure > img {
width: 100%;
height: auto;
}
JSFiddle Demo
I searched here already and tried some accepted solutions but not worked for my case. I have listed some html and I need these elements both wrapper element and inner elements in single line.
here how it looks now and html;
html;
<div class="container-fluid">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="well">
<ul class="media-list">
<li class="media">
<a class="toggle-area pull-left" href="javascript:void(0);">
<img class="media-object" alt="Mali Sistemler" src="/Content/img/login/mali_hizmetler.png">
</a>
<div class="media-body">
<h4 class="toggle-area media-heading"><span style="width: 95%;">Mali Sistemler</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4>
<div class="container-menus" style="display:none;"></div>
</div>
</li>
</ul>
</div>
<div class="well">... </div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="well">
<ul class="media-list">
<li class="media">
<a class="toggle-area pull-left" href="javascript:void(0);">
<img class="media-object" alt="Denetim Sistemleri" src="/Content/img/login/denetim.png">
</a>
<div class="media-body">
<h4 class="toggle-area media-heading"><span style="width: 95%;">Denetim Sistemleri</span><i class="fa fa-parent-container fa-plus-square pull-right"></i></h4>
<div class="container-menus" style="display:none;"></div>
</div>
</li>
</ul>
</div>
<div class="well">... </div>
</div>
</div>
Sequences of white-space will collapse into a single white-space. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
Use white-space:nowrap
Update css
.media-body, .media-left, .media-right {
display: table-cell;
vertical-align: top;
white-space: nowrap; /* Add this */
}
Working fiddle
fiddle code