How to move with icon from fontawesome in bootstrap card - html

I am learning web development and i need advice.
I have bootstrap card and i want to align the minus-square icon from font awesome to right but nothing work.
Do you have some ideas?
Thanks for everything! I am also sending picture to good imagine.

if you are using bs4, you could use the float-right class.
Demo working snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
Basic card
<i class="some-fa-icon float-right">♠</i>
</div>
</div>
</body>
</html>
Please note that instead of the icon I have used a html unicode character and mentioned some-fa-icon class which would be replaced by your actual font awesome classes.

Related

HTML can't recognize Font-Awesome

I have a problem My web app can't recognize the icons that I put with font-awesome, I dont know why. I have in my index.html in the header this:
<link rel="stylesheet" href="\~/lib/font-awesome/css/all.min.css"/>
<link rel="stylesheet" href="\~/lib/font-awesome/css/fontawesome.min.css"/>
Also have in my index.html:
<script src="\~/lib/font-awesome/js/all.min.js"></script>
<script src="\~/lib/font-awesome/js/fontawesome.min.js"></script>
In the component where I call the icon I have:
<div class="row g-3 ">
<div class="col-auto"><i class="fa-solind fa-circle-user"></i></div>
</div>
Is someone knows, why it does not work? I've tried everything and it doesn't work
I'm not sure which version you're using and if you are only allowed to use free icons.
The icons you use fa-solind and fa-circle-user cannot be found. Below an example with a free icon using version 5.15.4. Maybe it helps for you to find where you go wrong.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="row g-3 ">
<div class="col-auto"><i class="fas fa-user"></i></div>
</div>

Why is my application not using its bootstrap classes?

Just beginning with Bootstrap and have had some success. However, bootstrap classes aren't rendering. What am I missing here?
<div class="position-absolute bottom-0 end-0 border border-dark">
However, using normal CSS styling works as expected.
<div style="position:absolute; bottom: 0; right: 0; border-style: solid;">
See full html code here:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>{{ title }}</title>
</head>
<body>
<!-- <div id="background-div" style="margin-left:10px; margin-right: 10px;"> -->
<div id="background-div" class="position-relative mx-10">
<div id="title-div">
<h1>Title</h1>
<h3>One-liner goes here</h3>
<hr>
</div>
<div id="content-div" style="max-width: 66%;">
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
<!-- <div style="position:absolute; bottom: 0; right: 0; border-style: solid;"> -->
<div class="position-absolute bottom-0 end-0 border border-dark">
<div id="legend-div">
legend goes here
</div>
<div id="scale-bar-div">
scalebar goes here
</div>
</div>
</div>
</body>
</html>
While using Flask, if you are rendering HTML templates side by side (by running flask application) , you can try a hard refresh by pressing Ctrl+Shift+R (windows) because while using Flask changes in HTML or CSS don't take place immediately even after simple refresh!
OR
You try inspecting your HTML page in the developer's tool.
Opening developer's tool: Ctrl+Shift+J or Right click<inspect page
You can try seeing what CSS have been applied or not!
Found it! The CDN that I used was wrong. For reference, I was using the found on W3Schools (link).
The working CDN to use is this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I realise that this doesn't fix the bootstrap styling (as the classes do not produce the same result as the style attributes), but the main problem of bootstrap simply not working is fixed.
If you're just getting started with Bootstrap, it might be best to start with a current version. v5 is currently in Beta but appears to be quite stable and workable https://getbootstrap.com/
Note, in your answer you are still using an outdated BS, if you want to use v4 start here: https://getbootstrap.com/docs/4.6/getting-started/introduction/
There are a lot of bug fixes from 4.0 > 4.6

Bootstrap CSS is not loading on example page

I am experimenting with bootstrap css but it just isn't loading on my browser, I've even published the page on my server, It doesn't even render the css styles. Now other example pages load fine on my browser. Just the ones I download locally are giving me an error.
Here's what I've tried out so far:
Validated the HTML to see if I'm making some sort of syntax error but thats not the case. It came clean as a whistle.
Downloaded the bootstrap.css and locally referenced it in the html just in case it was something with my server fetching the file but that didn't worked either.
Lastly, I thought that this might had something to do with my text editor's text encoding or perhaps the end-of-line character incompatibility so I went to codeply.com and executed the damn thing in their online editor and good lord, it didn't worked there.
To clarify further, this is how the page is supposed to look like
against how It does look like
I can see that the css styles are partially applied as the page is not showing default html fonts and styles. I even tried changing permissions of the index.html file to 777 in case that was causing trouble but all in vain so far.
Here's a link to my raw html in codeply.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class='site-wrapper'>
<div class='site-wrapper-inner'>
<div class='cover-container'>
<div class='masthead clearfix'>
<div class='inner'>
<h3 class='masthead-brand'> NileSoft </h3>
<nav>
<ul class='nav masthead-nav'>
<li>Our Clients</li>
<li>Our Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.main.js"></script>
</body>
</html>
Might try writing the script tag such as this:
<script src="./js/bootstrap.main.js"></script>
Also, the same for the link tags which includes your bootstrap file locally:
<link rel="stylesheet" href="./css/bootstrap.min.css">
Also, the preferred order for CSS and JS files are as follows:
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="./css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap JS File -->
<script src="./js/bootstrap.min.js"></script>
<!-- Custom JS File -->
<script src="./js/custom.js"></script>
</body>
</html>
Script imported at the bottom has a http, it might have got blocked by your browser. Also writing <script src="js/bootstrap.main.js"></script> might not work in codeply. Also, try importing other js files after standard libraries like jquery.
To get Bootstrap into your page, simply paste the code below into the <head> section of your template.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Twitter BootStrap Checkbox Not Working

Currently I downloaded some CSS/JS files to make my check-boxes pretty (link found at end) and included them in my project. I am looking at his example code for making a check-box button, which is found under his example heading "Button Style". The colors seem to work great but only half of the checkbox is present (top half). I can't seem to figure out why the whole checkbox isn't displaying, but his example is working just fine.
Can someone help me figure out how to get his example working, so I can get a checkbox that toggles from red to green? completely new to bootstrap and help would be appreciated!
Link: http://montrezorro.github.io/bootstrap-checkbox/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-checkbox.css" rel="stylesheet">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
</head>
<body>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox" class = "style3"> Remember me</label>
</div>
</div>
</div>
<script>
$('input[type="checkbox"].style3').checkbox({
buttonStyle: 'btn-danger',
buttonStyleChecked: 'btn-success',
checkedClass: 'icon-check',
uncheckedClass: 'icon-check-empty'
});
</script>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Edit: Sorry, I don't know how to get the files I downloaded off of the website I posted above on Jsfiddle. I am slapping code together. Obviously you will need to download the code off the website since I imported this. If anyone can tell me how to use jsfiddle while integrating new files, that would be great.

Font Awesome Icon not appearing

Having some difficulties with Font Awesome and was wondering if anyone could point me in the right direction? This is what I have
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
When the page is then rendered however the camera icon is not appearing, although the Camera 3px text is. I'm sure I've overlooked something fundamental here. Any thoughts at all on this would be great.
Thanks
It is loading here:
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="sectionTitle">
<div class="section colour1">
<i class="fa fa-camera-retro fa-3x">Camera 3px</i>
</div>
</div>
</body>
http://jsfiddle.net/CLVx4/
Guess you did it all correct.
Your code looks correct so I think the problem is elsewhere.
If you are viewing the page through file:// URI scheme, rather than http://, the link to the external CSS file will not work without specifying http:// explicitly in the link url, this has caught me out plenty of times. May be worth changing the link to:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>