I have the following bootstrap info box:
<div class="alert alert-info" style="text-align: center" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<span style="font-size: 13px; vertical-align: middle;" class="alert-info" role="info">Please help support your chosen charity <b>{{ request.session.chosenCharity }}</b> and the str8RED development by signing up for additional benefits.</span>
</div>
This creates the following box:
As you can see it looks a little clumsy. I would like the "i" in the circle to be vertically centred in the blue box with the writing to its right but NOT over lapping like it currently does. I have tried using the django grid but it made the "i" and the writing look too far apart. I tried to use HTML tables but could not get it to match what I am after.
Any thoughts on how to solve this would be greatly appreciated.
you can display:flex property;
Take a look here and you can customize it as you like:
https://www.bootply.com/94SfnOPfd4 and also https://www.bootply.com/KndnEHLYCb
<div class="alert alert-info" style="text-align: center;width:300px;display: flex;" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;float: left;margin: auto;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<span style="font-size: 13px; vertical-align: middle;text-align: initial;" class="alert-info" role="info">Please help support your chosen charity <b>chosenCharity</b> and the str8RED development by signing up for additional benefits.</span>
</div>
I suggest to wrap the info in a div container and add this class info-container.. and apply vertical-align:middle property like the example
.info-container{
display: inline-block;
width: calc(100% + -50px);
vertical-align:middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" style="text-align: center" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<div class="info-container">
<span style="font-size: 13px; vertical-align: middle;" class="alert-info" role="info">Please help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additional benefits.</span>
</div>
</div>
Related
I am trying to add rounded corners to an image, but it does not seem to take effect when I do. I am not sure if I am putting the border-radius in the right location. Would someone be able to offer any advice by chance?
<p style="margin-bottom:0px">
<a href="Unpublisthed Website" target="_blank"><img border="0" src="Unpublished Photo" alt="Photo" width="124" style="max-width:124px; height:auto; border:0 border-radius:20px">
<br><br></a>
<span style="FONT-SIZE: 7pt; line-height: .8"> Click picture to view<br></span>
<span style="FONT-SIZE: 7pt; line-height: 1.6"> introduction video.</span>
</p>
I'm trying to get a small Bootstrap (4) badge next to a big title. What i've tried:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
and
<h1>Product></h1>
<span class="badge badge-primary">Version 1</span
What I want:
What is the easiest way to achieve this?
A cleaner approach would be to use the Bootstrap 4 utility classes that have been provided:
<h2 class="h3 d-inline-block">Product</h2>
<span class="badge badge-primary align-top">Version 1</span>
Output
Reading Material
display
vertical-align
Something like
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary" style="vertical-align: top">Version 1</span>
</div>
might do the trick.
You should use the first version:
<h1>Product <span class="badge badge-primary">Version 1</span></h1>
And apply the following styles on .badge
font-size: 10px;
vertical-align: top;
top: 10px; //depends on your font-size
position: relative;
In addition to the accepted answer, if you're using Bootstrap, you can also control the size of the badge using the css "text-small", "text-medium" or "text-large". Example:
<div>
<h1 style="display: inline-block">Product</h1>
<span class="badge badge-primary text-medium" style="vertical-align: top">Version 1</span>
</div>
I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
I've looked different options for aligning the FB share button with the other social media buttons, but none have worked for me yet. I'm only a few pixels off. Any ideas?
<div style="float:left; vertical-align:top">
<a class="twitter-share-button" href="https://twitter.com/share" data-url="{my url}" data-text="{text}" data-count="none" data-hashtags="{hashtag}" data-dnt="true">Tweet</a>
</div>
<div style="float:left; padding: 0 0 0 5px; vertical-align:top">
<div class="fb-share-button" data-href="{my url}" data-layout="button"></div>
</div>
<div style="float:left; padding: 0 5px; vertical-align:top">
<script type="IN/Share" data-url="{my url}"></script>
</div>
!Social Media alignment1
Change your .fb_iframe_widget class to this
.fb_iframe_widget {
display: inline-flex; /* changed line */
position: relative;
}
The facebook button has still a misalignment of one pixel.
Just add this to the css class above:
top: -1px;
P.S.: wanted to add this as a comment but I couldn't because not enough "reputation" points.