How can I make a card like this with css or bootsrap?
It is better to show your work than to search for answers to copy and paste here.
The below example below does not take responsive design into account, using bootstrap-4.
You can take it as reference and check the meaning of different class like ml-3, shadow from Bootstrap
<!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" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<style>
.diagonal-left {
width: 100px;
height: 100px;
background-color: #deadee;
transform: skewX(30deg);
transform-origin: top;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.diagonal {
width: 350px;
height: 100px;
background-color: #319b9e;
transform: skewX(30deg);
transform-origin: top;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.diagonal>span {
transform: skewX(-30deg);
color: white;
}
</style>
<body>
<div class="ml-3 row">
<div class="diagonal-left shadow"></div>
<div class="diagonal shadow"><span>Title<br>123</span></div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
-->
</body>
</html>
You can simply use transform:skew();
here is an exapmle.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallelogram {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
</style>
</head>
<body>
<h2>Parallelogram CSS</h2>
<div class="parallelogram"></div>
</body>
</html>
;
Related
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I am new to Web development and trying to create a basic avatar using HTML/CSS.
I created a style.css file, an avatar.css file and an index.html.
Everything works fine until I set the .avatar CSS class. I want to use it to round the corners of my image. But after I set the img class to "avatar", the images stay square while I should have 2 rounded images, one of 50x50ph and the other of 30*30 (one being set to the class avatar and the other on the class avatar-small).
Here is what the page looks like:
Here is my code
CSS style
/* --- Google Fonts--- */
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet")
/* --- Components Design--- */
#import "avatar.css";
/*#import url("components/button.css");*/
/*#import url("components/dropdown.css");*/
/*#import url("components/card.css");*/
/*#import url("components/badge.css");*/
/*#import url("components/banner.css");*/
/*#import url("components/tabs.css");*/
/*#import url("components/list.css");*/
/* --- Fonts--- */
body {
font-family: "Open Sans", "Helvetica", "sans-serif"
}
h1, h2, h3 {
font-family: "Montserrat", "sans-serif"
}
CSS avatar
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
HTML
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='style.css' rel='stylesheet'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;600&family=Open+Sans:wght#300;400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/73fba8f7d3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Web Components</title>
</head>
<body>
<div class="container">
<h1 class="text-center">UI components sprint</h1>
<h2>Avatar design</h2>
<img src="https://via.placeholder.com/50" alt="" class="avatar">
<img src="https://via.placeholder.com/50" alt="" class="avatar-small">
</div>
<!-- jQuery & Bootstrap JS for dynamic Bootstrap components -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I really can't understand what's wrong here. I tried finding the answer on my own but didn't manage to...
Thank you for your help.
If you have linked the url of your image, and put border-radius: 50% properly, you should get the result.
What I find is that you've linked style.css 2 times, and missed out avatar.css external link file. If its typo, then fix it. Otherwise, you should get the result.
img {margin: 20px;}
#img1 {border-radius: 10px;}
#img2 {border-radius: 30px;}
#img3 {border-radius: 50%;}
<img id="img1" src="https://picsum.photos/200/300" />
<img id="img2" src="https://picsum.photos/200/300" />
<img id="img3" src="https://picsum.photos/200/300" />
First, check your developer tools to see if the file is loaded. if both files are in the same hierarchy level, it should be fine as your code seems to work.
Your CSS code misses some ";" at every rule, which might be the reason they're not applied. the fix should look like this:
.avatar {
border-radius: 50%;
height: 50px;
width: 50px;
}
.avatar-small {
border-radius: 30%;
height: 50px;
width: 30px;
}
I hope it works, and happy coding :)
I have a jumbotron bootstrap width that covers the whole page. I want to implement a style where it doesn't covers the whole page. Is there any attribute I can apply that I can adjust the width?
/* style -- this is the stylesheet */
.jumbotron {
font-size: 17px;
cursor: pointer;
width: 5px;
}
.mycustom-jumbotron {
border:10px solid #003366;
width: 300px;
margin: 0 auto
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron mycustom-jumbotron text-center">
<h1>Bootstrap</h1>
<p>Bootstrap Web Design</p>
</div>
.jumbotron-test {
font-size: 17px;
cursor: pointer;
width: 50%;
text-align:Center;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="jumbotron jumbotron-test">
<h1>Jumbotron</h1>
<p>Testing Jumbo tron</p>
</div>
I am trying to get the `cover' template to work. All I did was copy both of the files (HTML and CSS) from the folder with all the templates from getbootstrap.com and it isn't displaying like they have it on the website.
This is what mine looks like.
This is what it looks like on bootstrap website.
HTML:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
<!DOCTYPE html>
<html lang="en">
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</nav>
</div>
</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 class="mastfoot">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Thanks!
Remove your linked files and replace them with the ones seen here:
<!DOCTYPE html>
<html lang="en">
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<link rel="stylesheet" href="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</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">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</nav>
</div>
</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 class="mastfoot">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I installed Froala successfully on my website, but positioning images doesn't seem to work.. They're always at the left, even if I align them center / right..
So in the Text-edit mode it works fine..
But after watching the result, all the 3 aligments look the same.
The images have these classes:
class="fr-dib fr-draggable fr-fil" // this should be left align
class="fr-dib fr-draggable" // this should be center align (doesn't work)
class="fr-dib fr-draggable fr-fir" // and this should be right align (doesn't work)
I found a way to fix this, by making an own css with these lines:
(But honestly I think, there should be an another way)..
.fr-draggable {
display: block;
margin-left: auto;
margin-right: auto
}
.fr-fil {
display: block;
margin-left: 0;
margin-right: 0;
}
.fr-fir {
display: block;
margin-left: auto;
margin-right: 0;
}
Could someone help me out?
EDIT: My site looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" href="common/css/main.css" />
<link rel="stylesheet" type="text/css" href="common/css/custom.css" />
<link rel="stylesheet" type="text/css" href="common/css/adminPOST.css" />
<!-- FROALA CSS -->
<link href="common/plugins/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/colors.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/file.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/quick_insert.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/table.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/video.css">
<!-- JS -->
<script src="common/js/jquery-1.11.1.min.js"></script>
<script src="common/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="common/js/jquery.elastic.source.js"></script>
<script src="common/js/main.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script src="common/js/adminPOST.js"></script>
<!-- FROALA JS -->
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/languages/hu.js"></script>
</head>
<body>etc...</body></html>
UPDATE:
I found the Froala image styles in the css/froala_style.css (or in the min version):
/**
* Image style.
*/
a.fr-view.fr-strong {
font-weight: 700;
}
a.fr-view.fr-green {
color: green;
}
/**
* Link style.
*/
img.fr-view {
position: relative;
max-width: 100%;
}
img.fr-view.fr-dib {
margin: 5px auto;
display: block;
float: none;
vertical-align: top;
}
img.fr-view.fr-dib.fr-fil {
margin-left: 0;
}
.fr-fir {
margin-right: 0;
}
img.fr-view.fr-dii {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
}
img.fr-view.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
img.fr-view.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
img.fr-view.fr-rounded {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
img.fr-view.fr-bordered {
border: solid 10px #CCC;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
But now what? Should I change something?:/
UPDATE 2:
Problem solved.. had to write class="fr-view" to the div where I'm displaying the content. I'm so dumb.. sorry guys!
I think you just add this head
<!-- Include external CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<!-- Include Editor style. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include external JS libs. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/js/froala_editor.pkgd.min.js"></script>
<!-- Initialize the editor. -->
<script> $(function() { $('textarea').froalaEditor() }); </script>
And your body tag
<div class="fr-view">
<!-- where you display your data -->
</div>
I'm going to guess that you're using Froala inside of a back-end CMS; have you also included Froala's stylesheet in your application's stylesheet and any necessary namespace classes?
For me the problem was not including the froala_style.min.css file. Once I included that the aligning started to work.