Develop Reference

My bootstrap modal is working when i run it locally, but it won't open when i run it through git-hub?

I can run my code just fine locally. Everything seems to be perfect. But as soon as I upload my repository to Git-Hub and try to run it with Git-hub pages, part of the website breaks? Specifically, the only issue is the Modal that's supposed to run when I click 'add to library' on the nav bar.
I tried deleting it off Git-Hub and reuploading it. I've tried moving the files around but nothing seems to work. I'm really not sure what the root of the issue is (?)
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-secondary"
data-toggle="modal"
data-target="#libraryModal"
>
Add to Library
</button>
<!-- Modal -->
<div
class="modal"
id="libraryModal"
tabindex="-1"
role="dialog"
aria-labelledby="libraryModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="libraryModalLabel">
Add to Library
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input
type="text"
class="form-control mb-2"
id="englishField"
placeholder="English"
/>
<input
type="text"
class="form-control"
id="spanishField"
placeholder="Spanish"
/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addWord">
Add Word
</button>
<button type="button" class="btn btn-primary" id="addPhrase">
Add Phrase
</button>
</div>
</div>
</div>
</div>
Expected: It would open up a modal with two text boxes and two buttons.
Actual: https://at-lowdesu.github.io/EstudiarEspanol/#study-inner (It doesn't open.)
Git-Hub Link: https://github.com/At-LowDeSu/EstudiarEspanol

You have a mixed content error. All src should link to https://.. but you have one with http://
<script
src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
Replace http://code.jquery.com/jquery-3.4.1.min.js with https://code.jquery.com/jquery-3.4.1.min.js

I was able to fix it by changing the jQuery script call.
<script
src="//code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>

The jQuery is not loaded or blocked in your page. The console said Blocked loading mixed active content “http://code.jquery.com/jquery-3.4.1.min.js”
You should fix this first, since bootstrap uses jQuery for its to run.
I've tried to inject the jQuery manually to the page and it works just fine.

Bootstrap Modal :
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
you can refer more examples of the modal.

Bootstrap Input Group not rendering correctly inside jQuery UI dialog

I have a number field with 2 buttons on each side of it to increment/decrement.
It renders fine when not in a jQuery UI dialog , like so:
Outside of Jquery Dialog:
Inside Jquery Dialog:
Code:
HTML:
<div class="form-group">
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" data-type="increment_FILEALERTMINS">
<i class="glyphicon glyphicon-plus">
</i>
</button>
</div>
<input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
<div class="input-group-btn">
<button class="btn btn-default" data-type="decrement_FILEALERTMINS">
<i class="glyphicon glyphicon-minus">
</i>
</button>
</div>
</div>
</div>
</div>
JS:
$(function() {
$(".form-group").dialog(); // comment this out to see it working properly!
})
Reproducible Fiddle:
https://jsfiddle.net/sajjansarkar/qr2zc4nj/

Here you go with a solution https://jsfiddle.net/qr2zc4nj/2/
$(function(){
$(".form-group").dialog();
})
.glyphicon{
font-size: 20px;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
<label class="control-label col-sm-3" for="FILEALERTMINS">
FILEALERTMINS:
</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" data-type="increment_FILEALERTMINS">
<i class="glyphicon glyphicon-plus">
</i>
</button>
</div>
<input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
<div class="input-group-btn">
<button class="btn btn-default" data-type="decrement_FILEALERTMINS">
<i class="glyphicon glyphicon-minus">
</i>
</button>
</div>
</div>
</div>
</div>
You need to add font-size to .glyphicon.
Hope this will help you.

There are multiple problems happening here :
The Bootstrap structure for the kind of form you're trying to create is incomplete.
You're binding jQuery UI's dialog() plugin on the .form-group-element, which adds jQuery UI CSS on it and breaks the style.
There are conflicting styles between jQuery UI and Bootstrap.
The first two are pretty easy to fix:
Add a .form-horizontal wrapper div around you entire HTML (form-horizontal in Bootstrap)
Wrap the entire code in another, style-less div and bind dialog() on it instead (eg.: $('#myForm').dialog()).
For the third, you'll have to write custom CSS to undo what jQuery UI is doing.
You need to reset the right button size, which can be achieved by doing the following:
.ui-widget button.btn {
font-size: 14px;
}
And set the container width to 100% (jQuery UI appends a fixed width in pixels when it initializes dialog() on it):
#myForm {
width: 100% !important;
}
Unfortunately you'll have to keep the !important on as it's the only way to override inline styles.
Finally, you may want to add a width option to your dialog. Your label is pretty long and you need the dialog to be initially wider so the input doesn't overlap it.
$("#myForm").dialog({
width: 700
});
Here's a working JSFiddle.
As a rule of thumb, I always try to avoid mixing plugins that may have conflicting styles. jQuery UI comes with styles and it doesn't work really well with Bootstrap. If you want to keep your app clean, try to look into Bootstrap's own dialogs: Modals.

bootstrap-wysiwyg loses focus

I'm trying to implement bootstrap-wysiwyg editor in a project, but every time I click a button in the toolbar that has a dropdown the editor loses focus, meaning that, for example, it's impossible to add links because the text is not selected, and images are always added at the beginning of the content because the caret position in the editor was lost. This happens in Firefox and Chrome.
Here is the HTML code for the insert link button for example (quite similar to the editor documentation example, but not working)
<div class="panel panel-info">
<div class="panel-heading">
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Insert Link"><i class="fa fa-link text-primary"></i></a>
<div class="dropdown-menu input-append">
<input class="form-control" type="text" data-edit="createLink" placeholder="URL" />
<button class="btn btn-success" type="button"><i class="fa fa-link"></i></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div id="editor">
</div>
</div>
</div>
The only JS code is the editor hook:
<script>
$(document).ready(function () {
$('#editor').wysiwyg();
});
</script>
I'm using jQuery v2.1.4, Bootstrap v3.3.6, and bootstrap-wysiwyg v1.0.4
Thank you for your help.

The version of the bootstrap-wysiwyg that you are using is out of date. This bug was fixed in the most recent version. You can download it here.

Radio button don't work with UiBootstrap

I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?

I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview

Collapsing element in bootstrap

<div >
<div>
<h3 style="display:inline-block;">Comments</h3>
<button id="add_button" style="display:inline-block;margin-left:240px;" type="button" class="btn btn-primary" onClick="$('#add_button').hide()" data-toggle="collapse" data-target="#comments">Add</button>
</div>
<div id="comments" class="collapse in">
<textarea style="resize:none;width:90%;" class="input xlarge" rows="4" id="comment-box" name="comment-box" placeholder="Type your comment here..."></textarea>
<button style="margin-right:30px;" id="submit_comment" class="btn btn-primary pull-right" name="submit_comment" type="submit" onClick="">Submit</button>
</div>
</div>
So this my code. I have a collapsable element from bootstrap and I am trying to have it start off collapsed in the page but trying multiple different methods I can't. I've used a couple of jQuery commands like hide() and collapse but none of them seem to work. Any ideas on how to get this to work?

Simply removing the in class from the id='comments' div as I've shown in this JSFiddle allows for the comments textarea to appear on clicking the add button:
http://jsfiddle.net/JHkHE/1/