Element exceeds column its in from Bootstrap - html

Question

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?

Answer 1

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

Answer 2

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