I have a Bootstrap 5 List Group object on the page. I'd like to add oversize Font Awesome icons to make it a little more visually interesting.
I have successfully added the icon using a span and some styling but am having an issue with the icon falling out of the bounds of the list-group-item. See the images below.
I'd like to keep the icon within the list-group-item but can't seem to make it work. I have tried z-indexing it but that doesn't work.
I think it might be related to where the span is perhaps?
.pages-icon {
font-size: 90px;
position: absolute;
right: 0;
top: -20px;
transform: rotate(11.81deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="list-group rounded-10">
<a href="#" class="list-group-item list-group-item-action w-100">
<span class="pages-icon"><i class="fa-thin fa-people-group text-cpPink"></i></span> Our People
</a>
<a href="#" class="list-group-item list-group-item-action">
<span class="pages-icon"><i class="fa-thin fa-building text-cpBlue"></i></span> Offices
</a>
Departments
Business Information
Events & What's On
Events & What's On
</div>
Seems like limiting overflow with Bootstrap's utility classes, along with a more robust negative top position, does the trick. Note that you don't really need the wrapping span elements.
I added an opacity effect for fun.
.pages-icon {
font-size: 90px;
position: absolute;
right: 0;
top: -50%;
transform: rotate(11.81deg);
opacity: 0.75;
transition: opacity 0.3s;
}
.list-group-item:hover .pages-icon {
opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="list-group rounded-10">
<a href="#" class="list-group-item list-group-item-action overflow-hidden w-100">
<i class="pages-icon fa-solid fa-people-group text-danger"></i> Our People
</a>
<a href="#" class="list-group-item list-group-item-action overflow-hidden">
<i class="pages-icon fa-solid fa-building text-info"></i> Offices
</a>
Departments
Business Information
Events & What's On
Events & What's On
</div>
You can add overflow: hidden to your list-items. This will hide anything that overflows outside of the container. As the user above suggested, this can be done with a bootstrap class as well.
Related
I can't believe this is as difficult as it seems. I want to use a Bootstrap dropdown list, but I want the caret to start off facing right and then point downward when the dropdown has been expanded. Rotating the caret as it is 90 degrees, is not the issue. The issue is how do I begin with the caret pointing to the right. Do I have hide the caret and totally replace it with something different?
CSS for rotation:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
HTML:
<div class="dropdown">
<span class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span>
Dropdown Example
</span>
</span>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Update
For #mahan who believes 'I must be doing something wrong". Here is the code for my test page in which the caret does appear pointing to the right, but it does not rotate and the menu does not expand:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<style>
.dropdown-toggle::after {
border-top: .3em solid transparent !important;
border-right: .3em solid transparent !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
vertical-align: middle !important;
transition: 0.7s;
}
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
/*
You may transform origin of the caret.
*/
transform-origin: 0.15em 0.32em;
}
</style>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</body>
</html>
<script src="~/Scripts/jquery-3.4.1.slim.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
this one makes dropdown face down
<div class="dropdown">
</div>
this one makes it open to the right then down.
<div class="dropright">
</div>
Thats what bootstrap website shows.
In case of replacing your caret this solution should work after doing display none to your caret icon. I am giving this alternative answer because i can not see working code in question
.dropdown-toggle::after {
content: ">";
transform: rotate(270deg);
}
I'm using react together with nextjs for SSR and boostrap. I have a component that loads bootstrap though cdn:
<Head>
<title>{title}</title>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" />
</Head>
Now in my navbar I use the font Montserrat via style jsx which is the way in nextjs to change css:
import Link from "next/link";
class Navbar extends React.Component {
render() {
return (
<div>
<nav
className="navbar navbar-light navbar-expand-lg fixed-top bg-secondary text-uppercase"
id="mainNav"
>
<Link href="/">
<a className="navbar-brand js-scroll-trigger ">Navbar</a>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item mx-0 mx-lg-1">
<Link href="/about">
<a className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">
Blog
</a>
</Link>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
More
</a>
</li>
<li className="nav-item mx-0 mx-lg-1">
<a
className="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger"
href="#"
>
About
</a>
</li>
</ul>
</div>
</nav>
<style jsx>{`
#media (min-width: 992px) {
#mainNav {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
transition: padding-top 0.3s, padding-bottom 0.3s;
}
}
.navbar-light .navbar-brand {
color: white;
font-weight: bold;
font-family: Montserrat;
font-size: 130%;
}
.navbar-light .navbar-nav .nav-link {
color: white;
font-family: Montserrat;
font-size: 90%;
font-weight: bold;
}
.bg-secondary {
background-color: #2c3e50 !important;
}
`}</style>
</div>
);
}
}
export default Navbar;
I used docker to put on mac the whole project in container so that I can switch between os without problems since I use a macbook pro as portable working station and my desktop windows pc for my home station.
Now everything works smoothly the only difference is that the fonts aren't really showing up like on mac. I checked this problem on Stackoverflow and someone wrote that if chrome doesn't find a font from google font it puts Times new Roman as default one like I see it as well. Now I don't really get why this happens since I load bootstrap I should have all font available here like on Mac. Maybe you could help me and tell me what I should change and why this happens.
Thanks so much guys!
Montserrat was not installed on my Windows machine and I needed to import the font family in the project. I thought I did that right with nextjs.. apprently not. However it works now locally.
Why does my top navbar on this page wrap before and after the "Landscaping" menu option?
I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.
The skeleton is working reasonably well aside from the strange split around the Landscaping option. See the page here.
I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient to know how to track this problem down.
Can anyone help me figure out what's wrong?
.w3-block {
display: inline-block !important;
width: auto !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
Auxsable
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<i class="fa fa-home"></i> HOME
<i class="fa fa-mobile-alt"></i> CONTACT US
<a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
<div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> FORESTRY
<i class="fa fa-user"></i> ABOUT US
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
Close <i class="fas fa-times-circle"></i>
<i class="fa fa-home"></i> Home
<i class="fa fa-mobile-alt"></i> Contact Us
<!-- Landscaping -->
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> Forestry
<i class="fa fa-user"></i> About Us
</nav>
<div class="w3-auto">
<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>
<div class="w3-container w3-padding">
<div class="w3-panel w3-light-grey w3-large">
<p class="w3-medium w3-serif">
<i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
</div>
</div>
</div><!-- w3-auto -->
<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
<p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>
You can change two class like this
/* if you dont want to float right */
.w3-right {
/* float: right!important; */
}
.w3-block {
display: inline-block;
/* width: 100%; */
}
If you want to keep float right, only change css .w3-block to
.w3-block {
display: inline-block;
/* width: 100%; */
}
Above is the screen shot of the html structure of your menu.
You could use ul and li for the same menu and the sub menu items as well.
I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.
<style>
.menu{
display:block;
text-decoration:none;
list-style:none;
/* width as per requirement; & other styling */
}
.menu > li{
position:relative; /* important to maintain the sub-menu item as local. */
display:inline-block;
/* width if needed */
}
.menu li a {
display:block;
width:100%;
/*padding as per the need*/
}
.menu .subMenu{
display:none;
position:absolute;
/* top as per the height of the .menu line-height or height */
left:0;
/* width: 100% or in em's */
}
.menu > li:hover .subMenu{
display:block;
}
.menu .subMenu li{
display:block;
width:100%;
}
</style>
<ul class="menu">
<li><span class="homeIcon"></span><span>Home</span></li>
<li><span class="contactusIcon"></span><span>Contact us</span></li>
<li><span class="forestryIcon"></span><span>forestry</span></li>
<li><span class="aboutusIcon"></span><span>About us</span></li>
<li>
<span class="landscapingIcon"></span><span>Landscaping</span>
<ul class="subMenu">
<li class="subMenuItem"><a href="#"item one</a></li>
<li class="subMenuItem"><a href="#"item two</a></li>
<li class="subMenuItem"><a href="#"item three</a></li>
</ul>
</li>
</ul>
My question is a pretty straightforward one. I'm using Bootstrap 4.0 to make a website. I have a Carousel Element below which my Container begins. The Container consists of two Rows, one for the Footer and the other for the Columns that house my content. I'm trying to align the three columns side-by-side (like actual columns). Each Column consists of one DIV Element (Bootstrap Column Class); with one image and text below it image. This works fine when I set the size properties of the images in the index.html file. However, once I copy the same information into my custom CSS file, the columns become stacked. I'm pretty sure I'm calling the images with the correct Syntax in CSS. But its just not working. I'm attaching screenshots to give an idea of what I intent to do and what actually is happening.
Any sort of help would be highly appreciated.
Thank You.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel = "stylesheet" href="custom.css">
<title>AlphaGamigLeague</title>
</head>
<body>
<nav class="navbar nav-pills">
<a class="navbar-brand" href="#">
<img src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" width="100px" height="100px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" height="650px" width="400px" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1Rq95g-w1Dpr-pq9vuI4p9bVV2hHPHiIw" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Of Carousel -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover" width = "350px" height= "400px">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H" width = "350px" height= "400px">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" width = "350px" height= "400px">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "myRow2" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md">
sdasdasdasdasdasda
<br>
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
All rights reserved. No fhsofsei fhioyw39847 ryo8wrt 48wotr o3qwryy 9aw4ro87
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "myRow2Column2" class="col-md">
<br>
<!-- Instagram Icon DIV Begins Here -->
<div id = "instagram">
<img src= "https://drive.google.com/uc?export=download&id=1jiCKayOmqF5hk1FDrF9wAfiG2VYlHoki" width= "50px" height = "50px" align = "right">
</div>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Beginss Here -->
<div id = "twitter">
<img src= "https://drive.google.com/uc?export=download&id=1JhT0U6SXfrZ8jyKOUhbZoEs7kpQ7bdXp" height= "50px" width= "50px" align = "right">
</div>
<!-- Twitter Icon DIV Ends Here -->
<!-- Facebook Icon DIV Begins Here -->
<div id = "facebook">
<img src= "https://drive.google.com/uc?export=download&id=1ZGjOfBJHrzCrXeP3hoc2FsgCLFX41sq2" height= "50px" width= "50px" align = "right">
</div>
<!-- Facebook Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
CSS CODE:
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: black;
}
.navbar-toggler{
background-color: orange;
border-radius: 8px;
}
.navbar navbar-expand-lg{
background-color: aqua;
}
.collapse{
background-color: aqua;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black:
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color: pink;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow1Column2{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow2{
background-color: forestgreen;
height:auto;
}
#myRow1Column3{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#disclaimer{
width: 300px;
text-align: left;
}
#socialMediaLinks{
position: relative;
bottom: 30px;
}
#myRow2Column2{
margin-right: 40px;
margin-left: 100px;
}
#instagram{
position: relative;
right: 20px;
}
#twitter{
position: relative;
right: 40px;
}
#facebook{
position: relative;
right: 60px;
}
#myfirstImage{
width = 150px;
height= 400px;
}
#mysecondImage{
width = 350px;
height= 400px;
}
#mythirdImage{
width = 350px;
height= 400px;
}
#firstImage{
}
#secondImage{
}
#thirdImage{
}
#secondImage:hover{
opacity: 0.6;
visibility: visible;
}
Intended Layout. Works when image size dimensions are specified in index.html.
Actual layout. When image size dimensions are removed from index.html and added to the CSS file.
Remove fix width from the images and add the img-fluid class to them.
I mean, what exactly do you expect to happen when you set fix width on the images? Anyway, the first step is to remove the fix width and then, to make the images responsive, you add the img-fluid class.
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class="img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img class="img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img class="img-fluid" id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q">
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
</div>
I've got a Bootstrap Navbar that is fairly basic and populated with image links over text. However, I'd like to also include a badge - IE, show the number of messages.
The problem is the badge position. It gets placed to the right, but I would prefer to justify it to the top-right relative to the image. It also directly affects the width and height of the link itself.
<li>
<a href="#">
<?= $this->Html->image('MessageIcon.png'); ?>
<span class="badge">42</span>
</a>
</li>
I have tried a few solutions that turned out to be fairly messy - forcibly setting the badge position, but ultimately they did not work too well. Does anyone have suggestions on how to handle badge position and link design in this case?
EDIT: To clarify, this is what I am trying to achieve:
Checkout this snippet
.icon.container a>img {
width: 40px;
}
.icon.container {
display: inline-block;
}
.badge-notify{
position: relative;
top: -10px;
left: -18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<ul>