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>
Related
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.
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile View
I have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?
answer updated
you can now individually give margin-right to your second link #PgmDetails
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-md-12">
some text
</div>
</div>
</div>
Try like that ?
I think glyphicon used extra padding or margin in your code.
just update
<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>
or you can inspect element so that you can see where is that extra padding
I think your using Bootstrap. We can use flex-column class Reference link
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>
I have multiple thumbs-up icons of font-awesome library on the screen. I want to toggle the color of the icon which is clicked.
How it can be done in AngularJS?
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-click="" class="not-liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Sorry, I have not written the AngularJS part (click method) because I am not aware with the Angular approach (though I have achieved it with jQuery).
You can simply use ng-click and ng-class directives.
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-class="{'not-liked':!liked,'liked':liked}" ng-click="liked=!liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Edit: removed extra ng-click.