I have a header in which I have one < image and back text is present .I need to give space or margin between these field example :5px .can we give margin in between field .
here is my code
http://codepen.io/anon/pen/xGgXVE
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
</body>
<ion-view>
<ion-header-bar align-title="center" class="bar-balanced">
<div class="buttons">
<a class="button icon-left ion-chevron-left button-clear">Back</a>
<!--i style="font-size:30px;" class='icon ion-chevron-left'></i-->
</div>
<h1 class="title">Title</h1>
</ion-header-bar>
</ion-view>
</html>
Use this CSS:
.button:before{
margin: 0 5px;
}
The :before element is the < icon.
Related
I'm failing to show Font Awesome icons on my app (only this page)! The icons are showing on the other pages but not on this one I don't know why! and yes I'm importing it in my index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
A link to codesandbox for better viewing
Here the code:
export default function Post({ post }) {
return (
<div className="coupon-container">
<div className="coupon">
<div className="content">
<h2>TITLE GOES HERE</h2>
<h1>
TEXT <span>TEXT</span>
</h1>
</div>
<div className="couponValidity">
<i className="fa fa-solid fa-timer"></i>
<p>SOME TEXT GOES HERE</p>
</div>
</div>
</div>
);
}
The icon you're using doesn't exist on the style you've imported. as I see the timer icon is a pro icon. but if you choose another icon, like:
<i className="fa fa-user"></i>
then the icon is rendered.
this works on me
<!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.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
</head>
<body>
<i class="fa fa-user"></i>
<p>SOME TEXT GOES HERE</p>
</body>
</html>
As you can see on my code, on the left panel, i have an UL and 2 LI.
I want all LI as white color.
I've set style but is not professional, perhaps setting my own style:
lblBiancoMenu does not affect
what can i do?
.lblBiancoMenu {
color: white;
}
;
.subCat .li {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
The theme you're importing has its own CSS styles. The color rule being imported has a higher specificity than your rule, so your rule is being overridden.
To override the theme styles, either use inline CSS (as you have done). Embedding the CSS in the HTML tag gives it higher specificity.
Or use the !important annotation, which overrides all other CSS declarations.
Use this in your code:
.lblBiancoMenu {
color: white !important;
}
.lblBiancoMenu {
color: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Hello I am using the has-error class on an input like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<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/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
But I would like to increase the thickness of the red border, so I tried to add this:
<style>
.has-error{
line-height:3px;
}
</style>
But it has no effect, so is it possible to change the thickness of this class and how to do it ?
Thank you
line-height is not the property you want to change, try border-width. You also need to specify the class to .form-control, otherwise your style won't be applied.
.has-error .form-control{
border-width: 3px;
border-color: blue !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<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/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
Hope it helps.
line-height has no relevance to border thickness - it sets the vertical size of each line of text inside the element. To set the thickness of a border, use the border-width property:
.has-error {
border-width: 3px;
}
I am using Bootstrap to make the style of my webpage.
I want to do something similar to this image:
I have been trying it (in the snipped you can test it), but I don't know if it is the best way to do it.
I mean that i'm not sure if is correct to add two divs without any data on it (col-xs-2), only to add some spaces (columns of bootstrap) to the left and to the right.
Is there a better way to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color:white;>
<div class="row" >
<div class="col-xs-12">WEB LOGO------------------------</div>
<div class="row">
<div class="col-xs-2" style="background-color:white;"></div>
<div class="col-xs-8" style="background-color:grey;">YES</div>
<div class="col-xs-2" style="background-color:white;"></div>
</div>
<span> more content here -------------</span>
</div>
</div>
</body>
</html>
Instead of the empty div's you can use an offset:
<div class="col-xs-8 col-xs-offset-2" style="background-color:grey;">YES</div>
This will move your element 2 columns to the right.
You need to implement style="inline-block" inside of the parent div you want the children to fall inline in.
I have a button in which I am using bootstrap css, I have used unicode text for the button, and I want the unicode text to be font size at 30px and the button height to be 34px; but it seems like the text is not centering within the button.
Can anyone please tell me some solution for this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px;"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
You can achive this in 2 ways :
with line height
remove height
Update: Update / Add this in your css file
.btn{
outline:none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.btn{
outline:none !important;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px; line-height: 16px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
<button type="button" class="btn btn-primary" style=" line-height: 34px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>