How to make font-awesome inline with div?
HTML
<div class="row clearfix">
<div class="col-lg-12">
<div class="alert alert-info" role="alert">
<span aria-hidden="true"><i class="fa fa-warning"></i></span>
<marquee>Lorem..</marquee>
</div>
</div>
</div>
I would use a flexbox to align both items. Be aware that <marquee> is obsolete.
div[role="alert"] {
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row clearfix">
<div class="col-lg-12">
<div class="alert alert-info" role="alert">
<span aria-hidden="true"><i class="fa fa-warning"></i></span>
<marquee>Lorem..</marquee>
</div>
</div>
</div>
You can do with CSS the following to align in right next to your text.
display: inline;
Related
I want to get the <hr> element next to my Icons, I set the style of Display to .inline-grid to let the hr element stay right next to my Icons.
The Problem is that I need to give it a width to because inline-grid takes it full size width.
How can the hr element be full size and still be between the Icons?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<span style="cursor: pointer">
<span class="glyphicon glyphicon-chevron-down"></span>
<hr style="width: 100px;margin-left: 0px;margin-right: 0px;display: inline-grid;margin-bottom: 0px;"/>
<span class="glyphicon glyphicon-chevron-down"></span>
</span>
</div>
</div>
Edit: the <hr> element should still be horizontal. (Icon horizontal line Icon) <= this should take the complete row width.
Edit2: wrong bootstrap Version in snipped. Changed to 3.3.7.
Instead display inline-grid use display flex.
hr {
flex:1;
}
.wrapper {
cursor: pointer;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="wrapper d-flex justify-content-center align-items-center">
<span class="glyphicon glyphicon-chevron-down">V</span>
<hr/>
<span class="glyphicon glyphicon-chevron-down">V</span>
</div>
</div>
</div>
Set these properties in style vertical-align: middle; margin: 0;
You can try this :
<div class="row">
<span style="cursor: pointer">
<span class="glyphicon glyphicon-chevron-down">V</span>
<hr class="m-0 pl-3 pr-3">
<span class="glyphicon glyphicon-chevron-down">V</span>
</span>
I would like to style Bootsrap 4's card-header so that there is a heading and span vertically aligned on same line. The header should consist of a <hX> heading for expanding card's card-body and a <span> which is non-clicable and pulled to the right:
How can I ensure the "Non-clicable body summary" span appear on same line as the "Clicable header"?
.card-header h3 {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div class="card">
<div class="card-header" id="headingOne">
<div class="float-right card-summary">Non-clicable body summary</div>
<a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
<h3>
Clicable header
</h3>
</a>
</div>
<div id="collapse" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<p>Some content</p>
</div>
</div>
</div>
Is this what you're looking for?
.card-header h3 {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<div class="card">
<div class="align-items-center card-header d-flex justify-content-between" id="headingOne">
<a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
<h3>
Clicable header
</h3>
</a>
<div class="card-summary">Non-clicable body summary</div>
</div>
<div id="collapse" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<p>Some content</p>
</div>
</div>
</div>
Removed floats and used default BS flexbox utility classes for
section.
first remove float-right class.
you can use the d-flex justify-content-between class in card-header div.
<div class="card-header d-flex justify-content-between" id="headingOne">
and also add align-self-center class. <div class="card-summary align-self-center">Non-clicable body summary</div>
Working Demo
Ref : Bootstrap utilities
I am working on a display where there are 3 checkboxes. When one of these checkboxes is triggered, a message or input field should appear. I got that part working, but the checkbox and the message are not aligned as shown in the image below
As you can see the "Ondertiteling" checkbox is not aligned with the text "Ondertitel enabled".
This is my code (with the toggling of the message ommitted for the question's sake)
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label> <input type="checkbox">Ondertitels</label>
</div>
<div class="checkbox">
<label> <input type="checkbox">Vertaling</label>
</div>
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div>Ondertitel enabled</div>
<div>Vertaling enabled</div>
<div class="text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I align the text to be on the same height as the checkbox? Thanks in advance.
I would ask to change your markup to fix the formatting so that bootstrap will handle it for us. Change the markup into rows such as this:
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
See demo below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span>Aanvraag #1</span>
<i class="fa fa-remove pull-right icon-clickable"></i>
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Ondertitels</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Ondertitel enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Vertaling</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox">Vertaling enabled</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="checkbox">
<label><input type="checkbox">Voice-overs</label>
</div>
</div>
<div class="col-lg-9">
<div class="checkbox text-danger">Voor voice-overs kan geen automatische prijsindicatie gegeven worden.</div>
</div>
</div>
</div>
</div>
</div>
</div>
Well the solution of your problem is to create three separate rows and one row spanning total 12 columns, for which you will use 3 for one checkbox and other for your notification or message.
So each message and check box will be bundled together in container or row class.
Will provide code shortly, if you don't understand what I am trying to say
remove the 10px margin-top from your checkbox class or add it to the othediv. I think this is what cause your offset. :)
Ok so you just need to add margin-top: 10px and margin-bottom: 10px to your div inside the col-lg-9
The answer you are probably searching is just changing the line or font height in your lg9 div
or using only one column, with checkbox and label having a constant width
I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.
Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property
You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->
I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?
<div class="col-md-12 well">
<div class="col-md-6">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center">
<span><em> Already have an account? Login</em></span>
</div>
</div>
I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.
Use col-md-offset-3 along with col-md-6 to center align your content:
<div class="col-md-offset-3 col-md-6">
...
</div>
Further more, set text-center class on the outside div and not on span tag:
<div class="col-md-offset-3 col-md-6 text-center">
<em> Already have an account? Login</em>
</div>
See fiddle here.
Try this:
.flex-centered {
display: flex;
justify-content: center;
margin-top: 31px;
height: 46px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
<div class="col-md-6 text-center">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6">
<div class="flex-centered">
<em> Already have an account? Login</em>
</div>
</div>
</div>
use div outside of span tag
<div style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
</div>
Try this code...
<body>
<div class="row">
<div class="col-md-6 col-md-push-3">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 col-md-offset-3">
<span><em> Already have an account? Login</em></span>
</div>
</div>
</body>
Plunker Link
After some fiddling around I found a solution..Its not a bootstrap solution. But its only few lines of css. If anyone found a bootsrap way post here and I will change the accepted answer. Thank you.
<div class="row well row-centered">
<div class="col-md-6 col-centered">
<h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center col-centered" >
<span><em> Already have an account?Login
</div>
</div>
here is the custom css
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}