Overlap element over other elements - html

Currently on my page I have this layout
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
It gives pretty simple result
But what I want to achieve is to move rank value from label formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this
How to achieve this using HTML and CSS?
Sample
https://jsfiddle.net/46qnx1LL

You can achieve this with a simple negative margin, e.g. margin-top: -75px;. With setting the border: none; and background: transparent; only the font is visible. Now you only need to apply text-align: right; to the parent div and your letter is on the right side.
Here is an example:
.card-block .col-form-label {
display: none;
}
.card-block > .row > div {
text-align: right;
}
.card-block .text-muted {
border: none;
background: transparent;
font-size: 4em;
font-weight: bold;
margin-top: -75px;
color: black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>

You can apply the CSS position:relative; and then specify an offset such as top:-50px;left:-20px; which would shift the element 20 pixels to the left and 50 pixels up. You can also specify right and bottom and use positive or negative values.
If you find that the element is hidden underneath another element, then you can move it up to a higher layer by specifying the z-index:layer number; so that the element is positioned on the right layer.
JS Fiddle

Related

Getting Horizontal scrollbar HTML

I am using bootstrap but while using row class I am getting horizontal scroll bar
<div class="row" style="margin-top: 10px; margin-right: 10px;">
<div class="card col-md-3" style="max-height:fit-content; background-color: khaki;" >
<div class="d-flex justify-content-center mg">
<img src="https://image.flaticon.com/icons/png/512/897/897219.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Artificial intelligence</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: cornflowerblue;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/888/888991.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Web development</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: darkcyan;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/2641/2641044.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Image processinge</h5>
</div>
</div>
</div>
Output
image output
please help
I have deleted fourth row from code due code code limitation on stackoverflow
Because you didn't give us your whole CSS style sheet this is hard to debug, so I give you a method to debug this yourself.
You can use the * and outline to see which items are out of line and correct them to float properly.
* {
outline: 1px solid purple;
}
* > * {
outline: 1px solid blue;
}
* > * > * {
outline: 1px solid red;
}
/* example CSS not part of the answer */
div, span {
padding: 20px;
margin: 4px;
}
h1 {
padding: 10px;
margin-bottom: 12px;
}
<div>
<h1>Testing page</h1>
<div>
<div>Wooow</div>
<span>This</span><span>is</span><span>Doge</span>
<div>
<div>
New level
</div>
</div>
</div>
</div>
My best guess is that you are using on the "row" class the margin-right where you should be using the padding-right. The "row" class uses 100% of the space it's put on, and you are using 100% + 10px, hence the scrollbar.
One other guess is the row below that seem bigger, it could be reason for scrollbar.

How to add icon in bootstrap card with title and text in the same row

I'm trying to add an icon to the bootstrap card. I want the icon, title, and text in the same row. for that, I used float left on the card icon but it didn't work. can someone advise how to do this?
thank you :)
.card-icon {
background: rgba(255,255,255,0.9);
border-radius: 50%;
width: 60px;
height: 60px;
float: left;
margin-right: 15px;
text-align: center;
}
.card-icon i {
font-size: 48px;
}
<div class="card m-b-30 card-body">
<div class="card-icon"><i class="mdi mdi-database"></i></div>
<h3 class="card-title font-24">Available Credits: 2</h3>
<p class="card-text">2 Email Verification Credits Left</p>
<div class="d-flex">
Buy More Credits
Track Your Credits
</div>
</div>
A good way to solve this problem is use flexbox.
Bootstrap 4 have a class d-flex to do that. By default, the flex-direction is row, so you will have your i h3 and p in the same row. And to make sure that the elements will fill all the width available, add flex-fill class in each element. The align-items-center class will try to center the vertical axis (but the margin top/bottom of elements can override this behavior).
<div class="card m-b-30 card-body">
<div class="d-flex align-items-center">
<div class="card-icon flex-fill"><i class="mdi mdi-database">a</i></div>
<h3 class="card-title font-24 flex-fill">Available Credits: 2</h3>
<p class="card-text flex-fill">2 Email Verification Credits Left</p>
</div>
<div class="d-flex">
Buy More Credits
Track Your Credits
</div>
</div>
Add your h3 and p elements to the inside of your div element. If this doesn't work make the widths of the elements percentages of the page, making sure they add up to 100% or less.
Edit:
In your css add
display: inline-block;
To ALL those elements.

Element exceeds column its in from Bootstrap

So i'm trying to make a bootstrap row with a title and a badge to the right.
To see what's happening see the image at the bottom of this post.
The code is as follows:
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-10 col-md-10">
<h1 class="workouttitle">#workout.WorkoutTitle</h1>
</div>
<div class="col-xs-2 col-md-2">
<h1>
#if (workout.Goal == "Afslanken")
{<span class="label label-primary workoutlabel">Afslanken</span>}
#if (workout.Goal == "Aankomen")
{<span class="label label-success workoutlabel">Aankomen</span>}
#if (workout.Goal == "Spiermassa opbouwen")
{<span class="label label-warning">Spiermassa opbouwen</span>}
</h1>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<p>#workout.DescriptionShort</p>
</div>
</div>
</div>
The css applied to it is
Title:
.workoutscontent h1 {
margin-top: 0;
font-family: 'Nunito', sans-serif;
}
Label:
.workoutlabel {
float: right;
}
The result looks like this:
Why does the label go outside of the box I put it in?
The main problem you're facing is that the right column definition is not large enough for it's content, so you need to take some away from the left column and add to the right. Remember to shoot for 12 columns per row.
Also you don't need the float on the h1, just use Bootstrap's text-right class on the div, to align in right in the column. Using a grid can help you eliminate using floats which can create extra styling work for you as it takes the elements out of the normal flow.
Below is an example showing your markup as is (structurally) and another version below it with a different column set up allowing room for the right hand column's content, as well as removing the float. I've put a grey background on the columns so you can see what's happening there.
In the column settings I changed it to:
XS Screens: 5/7
S Screens: 6/6
M+ Screens: 7/5
.workoutscontent h1 {
margin-top: 0;
font-family: 'Nunito', sans-serif;
}
.workoutlabel {
float: right;
}
/* for demonstration purposes only */
div.row div {
background: #cccccc;
border: 1px solid white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<code>Unmodified:</code>
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-10 col-md-10">
<h1 class="workouttitle">Title</h1>
</div>
<div class="col-xs-2 col-md-2">
<h1>
<span class="label label-primary workoutlabel">Afslanken</span>
</h1>
</div>
</div>
</div>
<hr/>
<code>Fixed:</code>
<div class="box workoutscontent">
<div class="row">
<div class="col-xs-5 col-s-6 col-md-7">
<h1 class="workouttitle">Title</h1>
</div>
<div class="col-xs-7 col-s-6 col-md-5 text-right">
<h1>
<span class="label label-primary">Afslanken</span>
</h1>
</div>
</div>
</div>
BTW... <span> is perfectly acceptable markup within an h1 as it is an inline element, so don't worry about that despite comments saying otherwise. Bootstraps own documentation shows it done this way: https://getbootstrap.com/docs/3.3/components/#labels
instead of float:right on .workoutlabel class just simply add text-right class on
also replace col-xs-10 col-md-10 with col-xs-9 col-md-9 and col-2-xs col-2-md to col-xs-3 col-md-3

Bootstrap grid, padding issue causing background to overflow

Situation
Using Boostrap v4, and when I add a background colour to a div, the element appears to become unaligned with all other elements in their columns. I have applied box-sizing: border-box yet it isn't staying within its container. Never had this issue before.
Aim
To keep the element within its column
HTML
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<section class="container padding-bottom--md">
<div class="row">
<div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
<h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
<p class="txt--white no-margin-bottom">A load of pish posh text</p>
</div>
<div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
<h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
<p class="txt--white no-margin-bottom">A load of pish posh text</p>
</div>
</div>
</section>
CSS
* { box-sizing: border-box; }
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
I found a way to solve the issue. Add a second inner div to hold the content without any padding.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-md-12 bg--white text-md-center padding-top--md">
<div class="bg--orange padding-info-inner-md">
<h5 class="text-uppercase txt--white">Resource centre</h5>
<p class="txt--white no-margin-bottom">Got a question? Have you checked our knowledge bank and help guides?</p>
</div>
</div>
</div>
</div>
</section>
CSS
.bg--orange { background: #e64b3c; }
.bg--white { background: #FFFFFF }
.padding-info-inner-md { padding: 2rem; }

Row having more white space at top and bottom

I am having problem with the bootstrap rows, where I am getting more white space at top and bottom of the rows, which I need to remove, I want the row to have just the height of the text present inside it...
HTML is given below :
<div class="row">
<div class="col-sm-6 text-muted">
<p>Author</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>abcd</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Date Created</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Nov 28, 19:30</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>File Type</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Microsoft Word</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Last Modified</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Dec 08, 11:00</p>
</div>
</div>
All you need to do is add the following CSS to your code:
.row-divider {
height: 1px;
margin: 0px;
overflow: hidden;
background-color: #e7eaec;
}
p {
margin: 0;
padding: 0;
line-height: 1;
}
You basically tell all your paragraphs to have 0 margins so the line height is equal to the text height.
On a different note, you might want to use text-muted class on the <p> tags instead of the whole <div> that contains those <p> tags. Why? because for example tomorrow you will add two more lines to that div that wouldn't need to be text-muted, you would need to define a new class to cancel those values.
Style the things you need and only those.
If you want the left text and right text on the same line in Jsfiddle just change the col-sm-x class to col-xs-x class, basically, jsfiddle view is a bit small and that's why you see two lines.
You have to set:
p{
margin: 0;
line-height: 14px; /*you can reduce this value to achieve what you want*/
}
Here a JSFiddle example to play with
Note that .row-divider has margin: 9px 0px if you want you can reduce it to closer to the text above it.
Check this out for more information about line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
margin: 5px 0px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
use clearfix class with row.