قناة الحاج ابراهيم للابداع الفني

لدي كود يعرض اشعارات الرسائل الواردة لكن عند استخدام تنسيق

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

يؤثر فى تنسيقات الموقع بشكل كبير ككل ولا اعرف حلا لهذه المشكلة

وهذا هو الكود - هل هناك حل لهذه المشكلة او هناك بديل لbootstrap

حتى لو يتم كتابة التنسيق بشكل يدوي

<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown">
 <div class="label label-pill label-danger count"></div> 
 <div class="glyphicon glyphicon-bell"></div>
 </a>
 <div class="dropdown-menu"></div>
 </div>

<script>
$(document).ready(function(){
 
 function load_unseen_notification(view = '')
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{view:view},
   dataType:"json",
   success:function(data)
   {
    $('.dropdown-menu').html(data.notification);
    if(data.unseen_notification > 0)
    {
     $('.count').html(data.unseen_notification);
    }
   }
  });
 }
 
 load_unseen_notification();
 
 $('#messages_form').on('submit', function(event){
  event.preventDefault();
  if($('#sender_id').val() != ''&& $('#sender_name').val() != ''&& $('#message').val() != '')
  {
   var form_data = $(this).serialize();
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
	 $('#messages_form')[0].reset();
     load_unseen_notification();
    }
   });
  }
  else
  {
   alert("Both Fields are Required");
  }
 });
 
 $(document).on('click', '.dropdown-toggle', function(){
  $('.count').html('');
  load_unseen_notification('yes');
 });
 
 setInterval(function(){ 
  load_unseen_notification();;
 }, 5000); 
});
</script>