I'm having some real trouble trying to align icons within their divs. Nothing I try works whether it be creating custom CSS or trying to use bootstrap's text-align-center.
Here's a cut down example of the navbar:
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i>
</div>
<div class="col">
<span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i>
</div>
<div class="col">
<span>Contacts</span>
</div>
</div>
</a>
</div>
I've tried to add text-center to the cols, I've also tried adding text-align: center; to the CSS but nothing seems to make any difference. I've also tried different sized cols and cols with no padding or margin.
I've tried adding an alignment to pretty much every tag or class and nothing works.
Any ideas?
Thanks!
UPDATE
Nobody seems to quite understand what I'm getting at, so I'll post a picture.
I've tried to align the icons using both CSS and bootstrap classes. I can live with it I guess but it's a bit annoying. Here's what's happening:
I don't understand what you mean exactly,
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 Icons</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i> <span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i> <span>Contacts</span>
</div>
</div>
</a>
</div>
</body>
</html>
If you want to center align them, you can:
try text-align: center on the parent/wrapper of the item you are trying to center align
another method is to add display: flex to the parent/wrapper and margin: auto to the item you are trying to center align.
i assume that you want to center align a link... If so i think u are supposed to add "a" after the div class in css... I will take home for exmaple.
I think the css should look something like,
.col a{ text-align:cenetr; }
Hopefully it helps.. thx
Related
I have a projects section part of my portfolio. I alternate between description on left/image on right to image on left/description on right. I have been painstakingly trying to make this responsive, but I cannot think of what to do to fix this. I want the image on top and the text below on every project when viewed on a smartphone.
This is the HTML for the projects section:
<section id="projects">
<div class="container">
<div class="row projects">
<h1>My Projects</h1>
<div class="col project-desc-left">
<h2>Tindog</h2>
<p>An landing page for the Tindog app. A twist on a typical dating app. Created with Bootstrap 5 and HTML/CSS utilizing Bootstrap grids.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <i class="fab fa-bootstrap"></i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/TinDog-WebDevBootcamp/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/TinDog-WebDevBootcamp" role="button" target="_blank">Github Repo</a> </div>
<div class="col col-lg-6 col-sm-12 project-img-right">
<img class="project-img" src="assets/tindog.png"/>
</div>
</div>
<div class="row projects">
<div class="col">
<img class="project-img" src="assets/nftcard.png"/>
</div>
<div class="col project-desc-right">
<h2>NFT Preview Card</h2>
<p>An preview card page created with HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/nft-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/nft-preview-card-component-main" role="button" target="_blank">Github Repo</a> </div>
</div>
<div class="row projects">
<div class="col project-desc-left">
<h2>3-Card Column</h2>
<p>A preview card of vehicle options created with HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> </i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/3-column-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/3-column-preview-card-component-main" role="button" target="_blank">Github Repo</a>
</div>
<div class="col project-img-right">
<img class="project-img" src="assets/3colcard.png"/>
</div>
</div>
</div>
</section>
I used Bootstrap 5 and I tried to use col-xs-12 but it didn't look right and it also completely messed up the desktop view. The laptop view looks exactly how I want it to look, it's just every other sizing that it completely wrong.
This is the CSS:
/* Projects */
#projects {
width: 100%;
}
#projects h1 {
text-align: center;
}
.projects {
margin-left: 0;
}
.project-img{
width: 300px;
}
.project-desc-left {
margin: 5rem;
width: 320px;
}
.project-desc-right {
}
}
I have been trying to tweak the code for days, but I have barely made any progress.
This is the laptop view of the projects section
This is the mobile view of the projects section
You should be able to do it using Bootstrap 5 Column Ordering without adding any extra CSS. You can add these classes to your Col's and they will appear on the page in the order given no matter their physical place in your HTML.
General useage.
.order-1
.order-2
.order-3
.order-4
.order-5
Ordering according to screen size. In this exammple, the Column will show 1st on SM screens, it will show second on MD screens and third on LG screens.
.order-sm-1
.order-md-2
.order-lg-3 etc etc etc
You can also specify items to be unordered or ordered-first and ordered-last. Here are the docs for everything here....
https://getbootstrap.com/docs/5.0/layout/columns/#order-classes
I got the left side to line up but can't get the right side to work. I tried pull-right, float:right, text-align:right, but none of them work. Here is my code. Appreciate any help]1
<footer class="footer clearfix">
<div class="footer-grid">
<div class="footer-L col-md-6">
<a class="footer-text" href="hysys.html">
<span>Previous</span>
<i class="fa fa-arrow-left"></i>
<h2>HYSYS<h2>
</a>
</div>
<div class="footer-R col-md-6 pull-right">
<a class="footer-text" href="hysys.html">
<span>Next</span>
<i class="fa fa-arrow-right"></i>
<h2>Aspen One</h2>
</a>
</div>
</div>
</footer>
I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).
I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?
Any help would be greatly appreciated.
Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment.
So for example:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/pLskpufp/2/
You can also just use a center aligned container:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/377v6ect/1/
I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Along with this css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}
I have searched on the semantic forums and other places; created mine.. Hope works for you too.
<div class="ui center aligned container">
<div class="ui" style="background-color: #009999;">
<!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
<div class="ui centered small image" >
<a href="#">
<img class="logo" src="./logo_white.png">
</a>
</div>
<!-- </a> -->
</div>
</div>
I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.
Code:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<a href="#about" class="btn btn-circle page-scroll btn-lg">
<i class="fa fa-angle-double-down animated"></i>
</a>
<a href="#contact" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>About Contact
</div>
I think this is what you want to do. Here is the fiddle:
http://jsfiddle.net/plushyObject/02s7wnm8/
<div class="col-md-8 col-md-offset-2 text-center outline">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<div class="col-sm-4 outline">
<a href="#about" class="btn btn-circle page-scroll btn-lg outline">
<i class="fa fa-angle-double-down fa-fw"></i>
</a>
<p class="outline">
Text is centered by 'text-center' class inherited from first
column.
</p>
</div>
</div>
If you text-align the parent element, it will be inherited by the picture.
CSS
.container {
text-align: center;
}
Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.
http://jsfiddle.net/vd6smL75/
Here's the WIP :
www.wearethefirehouse.com/wcftest
Logo is .SVG from Illustrator.
My code is (included the whole section for perspective, maybe conflicting div's?):
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
If you shrink browser window you'll see that it STARTS fine, then jumps around a bit, finally settling at a uselessly large iteration by the time you're in a mobile viewport.
How do I get it to scale cleanly?
This is my first time with SVG and I know it's something I need to use more... trial by fire, right?
Any help would be appreciated!
This has nothing to do with SVG. It's jumping around because of Bootstrap and the way it is resizing elements on the page based on page width.
If you don't want it to jump so much, you could use different bootstrap styles. Eg.:
<div class="col-md-12>
<img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>