Aligning Circles horizontally in Bootstrap

I don't have that great over bootstrap yet and cannot figure out how to properly position these circles equally under the title. Any help would be great I've tried many things. I think I've missed something stupid that I should of seen.

<!------HTML------->

/*---------CSS----------*/
#dif1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(41, 168, 224);
   padding-top: 100px;
}

#dif2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(221, 126, 81);
}

#dif3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(175, 79, 122);
    }

    #dif4 {
       width: 100px;
       height: 100px;
       border-radius: 50%;
        display: inline-block;
        color: white;
        background: rgb(138, 166, 90);
    }