Как не пересекаться с именами классов в bootstrap?
Используйте namespace. Это достаточно распространенная практика для изоляции стилей.
Попробуй разработать свой собственный framework, начни с собственной документации, заранее сформируй интуитивно понятную систему префиксов, можно в одну букву, к примеру:
l - layout
m - module
f - form
i  - item
n - navigation
и тд.
Префикс желательно писать через дефис, класс через нижнее подчеркивание, зависимый дочерний класс - через двойное подчеркивание модификатор - через дефис. 
Таким образом классы получаются очень емкие и уникальные, к примеру меню будет иметь вид:<ul class="n-m">
        <li class="n-m__i">
            <a class="n-m__i_a n-m__i_a-a">
                button 1
            </a>
        </li>
        <li class="n-m__i">
            <a class="n-m__i_a">
                button 2
            </a>
        </li>
    </ul>
n  - префикс навигации
n-m - класс меню
n-m_i - дочерний класс меню
n-m_i__a - ссылка в меню
n-m_i__a-a - класс активной ссылки