bootstrap col jumping out of container - css

Question

I am working on a single page app using AngularJS. I scaffolded my project using yeoman's angular generator, I'm using bootstrap-sass-official and compass.
I have some angular ng-repeat generated content which I placed inside bootstrap's col-xs-4 divs. There are three divs in a single row, and the third one (the one that contains a phone number), spills over the edge of it's container. I don't know why that happens and how to fix it.
my html:
<div class="panel-heading">kontakt</div>
<div class="panel-content contact">
<div class="container" ng-repeat="contact in contacts">
<div class="col-xs-4">
<p class="name-text">{{ contact.name }}</p>
</div>
<div class="col-xs-4">
<p class="email-text">
<a href="mailto:{{ contact.email }}">
<span class="glyphicon glyphicon-envelope email-icon"></span>
<span class="email-sign">{{contact.email}}</span>
</a>
</p>
</div>
<div class="col-xs-4">
<p class="phone-text">
<span class="glyphicon glyphicon-phone-alt phone-icon"></span>
<span class="phone-sign">{{ contact.phone }}</span>
</p>
</div>
</div>
</div>
my css:
/********************************
PANELS
********************************/
.panel-heading {
background-color: $secondary-color;
text-align: center;
font-weight: 600;
font-size: 1.2em;
margin: 0;
padding: 0.5em;
#include breakpoint(desktop) {
border-radius: 10px;
}
}
.panel-content {
background-color: #fff;
margin: 0 2.5%;
padding: 1em 0;
font-size: 1.2em;
/********************************
SPECIFIC PANELS STYLES-LOCATION
********************************/
&.location {
p {
text-align: center;
margin: 0 0 1em 0;
}
.map-container {
background-color: red;
margin: 0 auto;
width: 80%;
height: 10em;
#include breakpoint(tablet) {
height: 15em;
}
#include breakpoint(desktop) {
height: 20em;
}
}
}
/********************************
SPECIFIC PANELS STYLES-CONTACT
********************************/
&.contact {
p {
margin: 0;
padding: 0;
&.email-text {
margin: 0 auto;
}
}
.phone-text {
text-align: right;
}
.email-sign, .phone-sign {
font-size: 0.7em;
#include breakpoint(tablet) {
font-size: 1em;
}
}
.email-icon, .phone-icon {
color: #fff;
background-color: $secondary-color;
padding: 0.5em;
border-radius: 90px;
}
}
/********************************
SPECIFIC PANELS STYLES-HOURS
********************************/
&.delovni-cas {
text-align: center;
}
}
my controller:
'use strict';
angular.module('angularApp')
.controller('LandingController', function ($scope) {
$scope.contacts = [
{
name: 'informacije:',
email: 'knjiznica#ijs.si',
phone: '[phone]'
},
{
name: 'izposoja:',
email: 'ill#ijs.si',
phone: '[phone]'
},
{
name: 'bibliografije:',
email: 'branka.strancar#ijs.si',
phone: '[phone]'
},
{
name: 'vodja knjižnice:',
email: 'luka.sustersic#ijs.si',
phone: '[phone]'
}
];
});
I tried narrowing this down as much as I can. If you need more info, here is a github repo of the project (relevant files are in the app folder, under views there's landing.html, and under styles _landing.scss .

Answer 1

You need to wrap the col's inside a row.
<div class="panel-heading">kontakt</div>
<div class="panel-content contact">
<div class="container" ng-repeat="contact in contacts">
<div class="row">
<div class="col-xs-4">
<p class="name-text">{{ contact.name }}</p>
</div>
<div class="col-xs-4">
<p class="email-text">
<a href="mailto:{{ contact.email }}">
<span class="glyphicon glyphicon-envelope email-icon"></span>
<span class="email-sign">{{contact.email}}</span>
</a>
</p>
</div>
<div class="col-xs-4">
<p class="phone-text">
<span class="glyphicon glyphicon-phone-alt phone-icon"></span>
<span class="phone-sign">{{ contact.phone }}</span>
</p>
</div>
</div>
</div>
</div>