I am trying to fix these photos to be a tiny more centered. Maybe shift down a little and to the left. I am using all bootstrap and do not have any css attached to this. It is all working within the ul tags. Any help appreciated.
Page Screen Shot
<ul>
<li>
<a href="https://example.com" class="dropdown-header">
<strong>Example</strong><br />
<span class="megasubheader">| NEWS AND CONTENT </span>
</a>
</li>
<li class="dropdown-divider"></li>
<li class="list-group">
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc1" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle1" style="font-size: 14px"></span>
</div>
</a>
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc2" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle2" style="font-size: 14px"></span>
</div>
</a>
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc3" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle3" style="font-size: 14px"></span>
</div>
</a>
</li>
</ul>
Use my-auto on your img element.
Would this help your situation ?
<div class="d-flex w-100 justify-content-between flex-row align-items-center">
<img id="imgsrc3" width="75px" height="75px" class="rounded me-2">
<span id="Htitle3" style="font-size: 14px"></span>
</div>
More over bootstrap spacing:
https://getbootstrap.com/docs/5.0/utilities/spacing/
I saw that your text is long, so that has an effect too on it, with less text for me it works fine. hope this helps.
Related
When I try to apply margin-top to a container, the container moves, but so does the nav bar, do you guys know what can I do? I am using TailwindCSS, please check the images:
First Image
Second Image
<header>
<nav class="w-full bg-white fixed flex border-b-2 border-opacity-50 z-10">
<a class="" href="#home">
<img class="mx-48 p-2 w-24" src="assets/logo/dfnr.png" alt="Diefonro logo" />
</a>
<ul class="nav-list flex text-gray-500 relative left-40 font-bold mt-1">
<li class="p-3 mx-2 hover:text-gray-800">
Home
</li>
<li class="p-3 mx-1 hover:text-gray-800">
About
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Services
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Portfolio
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Contact
</li>
</ul>
</nav>
</header>
<main>
<div class="container mt-16 mx-auto bg-gray-700" id="home">
<p class="text-3xl">Hi! This is</p>
<h1 class="title gradient-title">DIEFONRO</h1>
<p class="pos-text">Junior Front-End Developer</p>
<button class="hire">HIRE ME</button>
<button class="get-cv">GET CV</button>
<img src="assets/img/Diefonro.png" alt="diefonro's ilustration" class="main-img" />
</div>
</main>
I think adding top-0 to the <nav> will fulfill your wish.
I am trying to implement a list where the user can select an element. I can select items but the "active" class is not removed from the previous ones. If I click in all of them, then all will be selected.
I am developing using twitter bootstrap and angular
<ul class="list-group" id="list-opponents">
<li *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span class="mr-3">{{ opponent.name }}</span>
<img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
</li>
</ul>
the produced html is the following:
<ul _ngcontent-c1="" class="list-group" id="list-opponents">
<!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object"}-->
<li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" data-toggle="list" id="1">
<span _ngcontent-c1="" class="mr-3">Me</span>
<img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/ana.JPG">
</li>
<li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-toggle="list" id="2">
<span _ngcontent-c1="" class="mr-3">You</span>
<img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/tininha.JPG">
</li>
</ul>
UPDATE: you can find a jsfidle here: https://jsfiddle.net/Bonomi/Lkz161er/7/
I figured out what the problem is. I can't use the ul li elements, I solved the problem using div and a:
<div class="list-group" id="list-opponents">
<a *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span class="mr-3">{{ opponent.name }}</span>
<img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
</a>
</div>
It works now.
I made a webpage with a "sticky" footer(the footer is at the bottom of content if the content is large, or at the bottom of the viewport if the content is small) by using flexbox. I am now trying to make it so the content will be at the center of the remaining height(vh - height of navbar - height of footer) if the content is small enough. Below is an image to demostrate what I just said.
Here is my code.
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
#div-1 {
background-color: #00ff00;
}
.full-height {
height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
The height of the content won't change, I'm just trying to support multiple screen sizes. I have encountered 2 problems by using this approach. First, it does not work on landscape mode on mobile(emulated using chrome dev tools). Second, the navbar shrinks in height.
jsfiddle is available here. You can also compare it with the original version. Adding /embedded/result/ to the end of the url will open the result in fullscreen. Thanks for helping!
If you change the following it will work as you asked for:
change to min-height: 100vh in the .full-height rule
remove align-items-center/h-100 and add m-auto in the id="div-1" elements class list
Do note, the <br> you had after the </nav> in the markup is invalid, so i removed it. If you want a gap there, use margin's padding's
Updated fiddle
Stack snippet
#div-1 {
background-color: #00ff00;
}
.full-height {
min-height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container d-flex justify-content-center m-auto" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
I'm having trouble having my footer cover the whole page. it's fine on an extra large screen but when I test it on lg,md,sm, there is a margin on the right side that scrolls to the right. It extends the width of the screen larger than the size of the screen (viewport?). Here is some code I have.
<footer class="footer text-center" style="height:420px; margin-top:220px">
<div class="container">
<h1 class="text-secondary col-lg text-center col-md offset-md-1" style="margin-bottom:5%">Contact</h1>
<div class="row" style="height:200px; margin-top:-2%">
<div class="col-md-4 mb-5 col-lg-4 col-md" style="">
<h4 class="text-uppercase mb-4 text-secondary"><u>Get in touch</u></h4>
<div class="col-lg col-md" style="">
<p class="footer-contact text-primary text-left"><i class="fa fa-home"></i> 9416 Barry dr, Romulus, MI</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-phone"></i> 703-517-0030</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-envelope"></i> hellochrisyou#gmail.com</p>
</div>
</div>
<div class="col-lg-4 col-md-3 offset-md-2" style="background-color:#ffffff; margin-left:0.5%">
<h4 class="text-uppercase col-lg text-secondary text-center"><u>Social Media</u></h4>
<ul class="list-inline mb-0 footer-social">
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-facebook icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-google-plus icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-twitter icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-linkedin icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-github icon-margin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4" style="margin-left:-0.5%">
<h4 class="text-uppercase mb-4 text-secondary"><u>Popular Links</u></h4>
<div class="container-fluid">
<div class="row footer-wide"">
<ul class="nav navbar-nav col-lg text-center" style="margin-left:5%">
<li><a style="color:#d3d3d3" href="#section1">Home</a></li>
<li><a style="color:#d3d3d3" href="#section2">About Me</a></li>
<li><a style="color:#d3d3d3" href="#section3">Education</a></li>
<li><a style="color:#d3d3d3" href="#section4">Skills</a></li>
<li><a style="color:#d3d3d3" href="#section5">Portfolio</a></li>
<li><a style="color:#d3d3d3" href="#section6">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
thanks.
Chris
EDIT:
The issue with this is that when you use 100vw for example, the scroll bar is taken in account for. As most people recommend, always use max-width as 100% to avoid any browser scroll bars.
Add these rules to your html and body css tags
max-width: 100%;
overflow-x: hidden;
if you are using Bootstrap
Make sure that your container class is .container-fluid
if the body container is only .container, then you can make separate container for the footer class set to .container-fluid and make its style="padding:0;margin:0"
====================
<body>
<div class="container">
html coding......
</div>
<div class="container-fluid" style="padding:0;margin:0">
<footer>
html coding.......
</footer>
</div>
</body>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="source.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Navigation -->
<nav class="navbar navbar-default bg-secondary fixed-top" style="height:200px" id="mainNav" role="navigation">
<div class="container">
<div class="row">
<p class="navbar-brand font-title col-xl-4 offset-xl-4 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-3 text-center">Chris You</p>
</div>
<div class="row">
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section1">Home</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section2">About Me</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section3">Education</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section4">Skills</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section5">Portfolio</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section6">Contact</a>
</div>
</div>
</nav>
<!--image-->
<div class="row" style="margin-top:300px">
<img class="col-xl-2 offset-xl-5 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-4" src="me.gif">
</div>
<!--Description-->
<div class="jumbotron jumbo-header">
<div class="row">
<p class="about-title text-third text-center col-12"><strong>Software Developer</strong></p>
</div>
<p class="about-text text-primary text-left col-xl-4 offset-xl-4 col-lg-7 offset-lg-3 col-md-6 offset-md-3 col-sm-8 offset-sm-2"> Hi! I'm Chris. I am a very passionate software developer based in Detroit, MI. Highly motivated to write clean and effective code. I specialize in Java, C#, C++. Feel free to contact me!</p>
</div>
How can I float a fontawesome icon to the right and still have it vertically middle aligned? I've tried using ml-auto and Flexbox, but it's not working.
Here's my code:
<ul class="list-group flex-column">
<li class="list-group-item py-2 d-flex justify-content-start">
<a href="#">
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>
Can someone help me out? Thanks!
Use the flex and sizing helper classes to make the link a flex parent with 2 children - the content you want on the left, and the content on the right. Use .justify-content-between, .align-items-center to separate the content so the arrow is on the right and centered vertically.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group flex-column">
<li class="list-group-item py-2 d-flex">
<a href="#" class="d-flex w-100 justify-content-between align-items-center">
<span>
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>
Try with this structure:
<ul class="list-group">
<li class="list-group-item">
<a class="w-100 d-flex align-items-center py-2" href="#">
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>
Click here to see it working in jsfiddle.
Your <a> tag doesn't fill the entire parent, so you can't see the effect of ml-auto on the icon. Also d-flex must be in the a tag, not in li.