I´m trying to align some text with an icon-font icon in a button with custom height. The icon and the text should both be in the vertical center of the button with some pixels padding to the left and right side so that they both are in the horizontal center of the button. It also seems that the attribute which sets the size of the icon also doesn´t work.
/* Styles go here */
.btn-group{
margin-top: 20px;
margin-left: 20px;
}
#left, #middle, #right{
height: 25px;
}
.button-content{
}
.button-icon{
}
.button-text{
vertical-align:middle;
}
.button-text i{
font-size: 12px; /* Change of icon-size doesn´t apply */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
</div>
</body>
</html>
You can also find my code on Plunker.
EDIT
I fixed all issues besides the the fact that icon and text aren't in the vertical center of the button.
The Plunker was also updated.
EDIT 2:
The problem was fixed by using #MarcosPérezGude idea
#left, #middle, #right{
height: 26px;
padding-top: 1px;
padding-bottom: 0px;
}
in addition to #iyyappan answer with the partial solution
.material-icons {vertical-align: middle;}
I checked your codes.
Please try it.
#left, #middle, #right {
height: auto;
}
.material-icons {vertical-align: middle;}
Please add vertical-align: middle; to the .material-icons class.
.material-icons {
vertical-align: middle;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.btn-group{
margin-top: 20px;
margin-left: 20px;
}
#left, #middle, #right{
height: 25px;
}
.button-content{
}
.button-icon{
}
.button-text{
vertical-align:middle;
}
.button-text i{
font-size: 12px; /* Change of icon-size doesn´t apply */
}
#left, #middle, #right {
height: auto;
}
.button-icon {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
<span class="buton-content">
<span class="button-icon"><i class="material-icons">info</i></span>
<span class="button-text">CONTENT</span>
</span>
</label>
</div>
just remove below code from your custom css file style.css that is making issue of improper height.
#left, #middle, #right {
/* height: 26px; */
}
your custom css height is overriding the default bootstrap's buttons' height
Note: Due to that you can't getting see your content in middle but
(Actually is there in middle).
Button size in Bootstrap Reference Link
try this may help you and for changing the size of icon use font-size
#left, #middle, #right
{
height:26px;
}
.material-icons
{
vertical-align: middle;
font-size:13px;
}
.btn
{
padding:2px 12px;
}
Related
I want to use a font-awesome icon as a bullet point but the h5-tag starts under the fa-icon instead of being on the same line.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<i class="fas fa-check-circle" style="font-size:30px"></i>
<h5>100% Guaranteed Chargeback</h5>
You can align variable-height elements using display: flex and align-items: center:
.container {
display: flex;
align-items: center;
}
.container i {
margin-right: 8px;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="container">
<i class="fas fa-check-circle" style="font-size:30px"></i>
<h5>100% Guaranteed Chargeback</h5>
</div>
You also have the option to add it via a pseudo element.
.check-circle::before {
font-family: "Font Awesome 5 Free", sans-serif;
content: ' \f058 ';
font-size: 30px;
vertical-align: middle;
padding: 0 0.25em;
color: tomato;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<h5 class="check-circle">100% Guaranteed Chargeback</h5>
unicode value can be found on fontAwesome site at description's icon : https://fontawesome.com/v4.7.0/icon/check-circle
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I my html page I have a checkbox and two buttons aligned horizontally. These are populated dynamically through a PHP function. I find aligning the checkbox to exactly the same size as buttons and in line with buttons difficult.
The following is a minimal example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="col-xs-6 col-sm-2 text-center">
<img src="" width="200" height="200" class="img"/>
<h6>Test Image</h6>
<input type="checkbox" id="'.$imgnam.'" title="Select Image" name="matchedImage" value="'.$imgnam.'" >
<button class="actButton" id="tbutton" onclick="downloadImage(this.id)" title="Download Image" style="background-color: #CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton dropbtn" id="shareImage" onclick="shareImage(this.id)" title="Share Image" style="background-color:#CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</div>
</body>
</html>
If I apply css to checkbox such as :
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
The box appears few pixels above the button. How do I align the checkbox with the buttons. Attaching an image output
Remove all padding and add the following to .actButton:
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px
Increase the font-size to 18px. Add .actButton class to checkbox as well and remove everything but the border and appearance properties.
Also the containing <div> has been changed to a <fieldset> and class .col-sm-2 was changed to .col-sm-6 at -2 means that there's less space as the screen gets bigger, did you really want backwards behavior? If so just change back to .col-sm-2. The <main class='container'> and <section class='row'> was added as well (normally these tags would be <div> but it's just easier to read using semantically correct tags).
Demo
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid black;
}
.actButton {
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px;
background-color: #CECECE;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
margin: 10px 0px 22px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main class='container'>
<section class='row'>
<fieldset class="col-xs-6 col-sm-6 text-center">
<img src="https://via.placeholder.com/200" width="200" height="200" class="img" />
<h6>Test Image</h6>
<input type="checkbox" title="Select Image" name="matchedImage" class='actButton'>
<button class="actButton dropbtn" id="tbutton" title="Download Image"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton" id="shareImage" title="Share Image"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</fieldset>
</section>
</main>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
did you mean em? It's mm in your code.
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
Add this line in your css for the checkbox
vertical-align: middle;
I am working with bootstrap. I got a problem. I am using the following classes: form-control and form-inlinel. And here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<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.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is css:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0;
margin-top: 5px;
margin-bottom: 5px;
}
.container-fluid
{
padding: 20px;
text-align: center !important;
}
.label
{
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center
{
width: 200px;
margin: 0 auto;
}
.moveDown
{
margin-top: 5px !important;
display: block !important;
}
.label.moveDown
{
display: inline-block !important;
}
And now about the problem. If you start the html on medium screen it is exactly okay and exactly what I want. However, try to resize and you will notice the problem. It is input the thing that is not satisfies me, it moves to left on small enough screen. If you know how I can tackle that help me, please.
If you change this part of your CSS to read:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:0 auto;
margin-top: 5px;
margin-bottom: 5px;
}
The Margin: 0 Auto; attribute force center the inputs for you!
It could even be shortened to:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"]
{
max-width: 100px;
margin:5px auto;
}
To take into account the 5px margin you've added.
Hope this helps!
There are two ways you can make it stays centred.
In the element input[type="text"], add the value auto in margin and it will stay centred.
Or you can add the property display: inline-block; in input[type="text"].
It works both ways.
EDIT: The reason that it doesn't stay centred when reduced to mobile size is because Bootstrap has set the element input as block; pushing it to the left side.
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 100px;
margin: 5px auto;
}
.container-fluid {
padding: 20px;
text-align: center !important;
}
.label {
font-size: 15px !important;
margin-bottom: 10px !important;
}
.center {
width: 200px;
margin: 0 auto;
}
.moveDown {
margin-top: 5px !important;
display: block !important;
}
.label.moveDown {
display: inline-block !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
<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.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<div class="center">
<div class="label label-primary">First interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from1">
<input type="text" class="form-control" placeholder="To" id="to1">
</div>
<div class="label label-primary">Second interval</div>
<div class="form-inline">
<input type="text" class="form-control" placeholder="From" id="from2">
<input type="text" class="form-control" placeholder="To" id="to2">
</div>
<button type="button" class="btn btn-success" id="button">Show intersection</button>
<div class="label label-primary moveDown">
Intersection:
</div>
</div>
<div class="label label-primary moveDown">From should be less than To. Otherwise the answer will be wrong.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</div>
</body>
</html>
Here is a fiddle
I removed the form-inline and changed it to it's own custom class (I just called it inputs for the sake of this example). Then I added simply added this CSS:
.inputs {
padding-left: 3.5em;
}
You can slide the fiddle back and forth now and see that it stays in the center.
I have HTML code for a website, but the <button> elements in the center are too far up. Here's my code:
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<button type="button">Home</button>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<button type="button">Help</button>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
As you can see, the buttons in the center are slightly higher. Why is this happening, and how can I align them correctly?
The default vertical alignment of inline elements is "baseline," which means the baseline of the element will be the same as the baseline of its parent.
If you add text to the parent element (nav), you'll see that the first word of each button sits on the same line as it:
To overcome this, set vertical-align of the buttons to "top" or "bottom":
button {
vertical-align: top;
}
h1
{
text-decoration: underline;
}
/* Common Header */
body
{
background-color: #d5d5d5;
}
.header button
{
background-color:#8C481B;
text-align:center;
}
button
{
display:inline-block;
border-radius:15px;
height:50px;
width:125px;
font-size:20px;
vertical-align: top;
}
button span .comingsoon
{
color:#eeeeee;
font-size:10px!important;
}
nav
{
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<button type="button">Home</button>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span></button>
<button type="button">Help</button>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
You have an extra space in your CSS -- the "comingsoon" class is not being applied to your span;
Changing that from
button span .comingsoon
to
button span.comingsoon
Will fix the button alignment and font size mistakes.
you need to reset vertical-align value :
a,
button {
vertical-align: top;
/* or any other value that suits you */
}
h1 {
text-decoration: underline;
}
/* Common Header */
body {
background-color: #d5d5d5;
}
.header button {
background-color: #8C481B;
text-align: center;
}
button {
display: inline-block;
border-radius: 15px;
height: 50px;
width: 125px;
font-size: 20px;
}
button span .comingsoon {
color: #eeeeee;
font-size: 10px!important;
}
nav {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<!-- Start Header -->
<div class="header">
<nav>
<a href="index.html">
<button type="button">Home</button>
</a>
<!--First Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span>
</button>
<!--Second Case (unnamed)-->
<button type="button" disabled><span class="comingsoon">Coming soon!</span>
</button>
<a href="help.html">
<button type="button">Help</button>
</a>
</nav>
</div>
<!-- End Header -->
<h1>Coming Soon!</h1>
</body>
</html>
You have to remove blank space between span and .comingsoon
use : button span.comingsoon
They are mis-aligned because the text is in multiple lines.
Try setting a smaller font-size, or seting a white-space:nowrap style to achieve one-line only text.
Alternatively, you can remove the width and let the buttons grow organically, based on the text within.
I've tried margin 0 auto in the css but it didn't seem to work, i'm not quite sure what i'm doing wrong, could anyone help me? I would like to move the text to touch the left side of the container because as of now it is in the middle of the container. The text I'm talking about is the text in the p tags, which are the email, Facebook, instagram, and twitter. Thanks for taking the time to help. Have a good day!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Paulo Pinzon-Iradian
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
<div>
</div>
</body>
</html>
Css:
.navbar-default{
background: #fff;
margin-top:3.5%;
border:0px;
}
.navbar-brand
{
font-family: helvetica;
font-size: 24px;
}
ul, li, a
{
font-family: helvetica;
font-size: 24px;
color: #000000;
letter-spacing: -0.5px;
font-weight: 100;
}
.navbar-toggle
{
border:0px;
}
.col-xs-6
{
margin-top:1.5%;
line-height: 27px;
}
.row
{
width: 92%;
margin-left: auto;
margin-right: auto;
}
.jumbotron
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
}
Currently there's a large padding surrounding the p elements. To fix that without overriding it using bootstrap class, add new class no-padding or something then override it on the css targeting that new class.
e.g.
HTML
<div class="container">
<div class="jumbotron no-padding">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
CSS
.container .jumbotron.no-padding
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
padding-left: 0;
padding-right: 0;
}
Fiddle
The elements you want to remove the margin are inside a .jumbotron element, this is styled by bootstrap and will add those margins/paddings. Check the docs for jumbotron
<div class="jumbotron">
You can either override the styles by adding !important in your styles (bust me after the bootstrap styles), or use another bootstrap component other thant jumbotron.
If you mean text in .jumbotron class, you can simply remove padding-left in
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
padding-left: 0;
}
}
or simply remove it
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
{
}
Remove the left padding from the jumbotron container, either through your css page or inline styling.
Example:
<div class="jumbotron" style="padding-left:0px;">
// your content here
</div>
or (using css):
.jumbotron {
padding-left: 0px !important;
}
Fiddle:
https://jsfiddle.net/mwatz122/614wjpjh/