Замена подвала

[Efremov]

Привет всем. Пытаюсь создать html виджет для футтера форума. Выглядеть должен примерно так-


Создаю виджет html, вставляю следующий код:

Код

<div class="row mt-40">
              <div class="col-sm-6 col-sm-offset-3 align-center">
                <p>Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words.</p>
              </div>
            </div>
          </div>
        </section>
        <div class="module-small bg-dark">
          <div class="container">
            <div class="row">
              <div class="col-sm-3">
                <div class="widget">
                  <h5 class="widget-title font-alt">бла-бла</h5>
                  <p>The languages only differ in their grammar, their pronunciation and their most common words.</p>
                  <p>Phone: бла-бла</p>Fax: бла-бла
                  <p>Email:<a href="#"></a></p>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="widget">
                  <h5 class="widget-title font-alt">Recent Comments</h5>
                  <ul class="icon-list">
                    <li>Maria on <a href="#">Designer Desk Essentials</a></li>
                    <li>John on <a href="#">Realistic Business Card Mockup</a></li>
                    <li>Andy on <a href="#">Eco bag Mockup</a></li>
                    <li>Jack on <a href="#">Bottle Mockup</a></li>
                    <li>Mark on <a href="#">Our trip to the Alps</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="widget">
                  <h5 class="widget-title font-alt">Blog Categories</h5>
                  <ul class="icon-list">
                    <li><a href="#">Photography - 7</a></li>
                    <li><a href="#">Web Design - 3</a></li>
                    <li><a href="#">Illustration - 12</a></li>
                    <li><a href="#">Marketing - 1</a></li>
                    <li><a href="#">Wordpress - 16</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="widget">
                  <h5 class="widget-title font-alt">Popular Posts</h5>
                  <ul class="widget-posts">
                    <li class="clearfix">
                      <div class="widget-posts-image"><a href="#"><img src="assets/images/rp-1.jpg" alt="Post Thumbnail"/></a></div>
                      <div class="widget-posts-body">
                        <div class="widget-posts-title"><a href="#">бла-бла</a></div>
                        <div class="widget-posts-meta">23 january</div>
                      </div>
                    </li>
                    <li class="clearfix">
                      <div class="widget-posts-image"><a href="#"><img src="assets/images/rp-2.jpg" alt="Post Thumbnail"/></a></div>
                      <div class="widget-posts-body">
                        <div class="widget-posts-title"><a href="#">Realistic Business Card Mockup</a></div>
                        <div class="widget-posts-meta">15 February</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hr class="divider-d">
        <footer class="footer bg-dark">
          <div class="container">
            <div class="row">
              <div class="col-sm-6">
                <p class="copyright font-alt">бла-бла</p>
              </div>
              <div class="col-sm-6">
                <div class="footer-social-links"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a><a href="#"><i class="fa fa-skype"></i></a>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </div>
      <div class="scroll-up"><a href="#totop"><i class="fa fa-angle-double-up"></i></a></div>
    </main>

Но в итоге выходит следующее:


Подскажите как его код правильно прописать?

 

[Mirovinger]

Приветствую.
Стилизацию подключать за Вас никто не будет.

 

[Efremov]

Приветствую.
Стилизацию подключать за Вас никто не будет.

А где глянуть как ее подключить? Пересмотрел поиск по виджетам- толком ничего не нашел. Виджет создаю на основе UI.X Fotter. Там стилизация должна быть уже подключена.

 

[Skaiman]

Виджет создаю на основе UI.X Fotter.

А в стиле UI.X?

 

[Efremov]

А в стиле UI.X?

UI.X Dark

 

[Mirovinger]

Не должна, одинаковые классы быть не могут, подключить стилизацию в виджете тоже не проблема.

 

[Efremov]

подключить стилизацию в виджете тоже не проблема

Это нужно прописывать кодом css?

 

[Mirovinger]

Это можно как в extra.less, так и созданием своего шаблона и подключением его в виджет.

 

[Efremov]

Это можно как в extra.less, так и созданием своего шаблона и подключением его в виджет.

Мда... Лучше обращусь к вам за помощью. Потом, как деньги будут.