Clash Royale CLAN TAG

How can I see the style I apply to an html page (bootstrap) on a browser?

I know this was already answered somehow here on stackoverflow but I couldn't find a solution yet. I am using bootstrap to style my html, the problem is when I try to visualize it in the browser(safari and chrome) or in the previewer in Visual Studio Code, it only shows the raw html. I've been all day trying different stuff but I can't find the answer. When I deploy it to a local server, it works.

How the files are organized:

Raw HTML:

Code for adduser.html:

<div class="adduser">
<h2>Add user</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label" for="inputUsername">Username</label>
<div class="controls">

<div class="input-group col-lg-5">
<span class="input-group-addon">@</span> <input type="text"
class="inputUsername form-control"
placeholder="Username (e-mail address)">
</div>

</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" for="inputName">Name</label>
<div class="controls col-lg-5">
<input type="text" class="inputName form-control" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" for="inputName">Type</label>
<div class="controls col-lg-5">
<select class="selectType form-control">
<option value="ADMIN">Administrator</option>
<option value="USER">User</option>
<option value="READ_ONLY">Read only</option>
</select>
</div>
</div>
<div class="form-group">
<div class="controls buttonBar">
<button type="button" class="btn btn-primary addButton">Add</button>
</div>
</div>
</form>


<script>
function AddUser(main) {
var othis = this;

this.close = function(){
};

this.show = function(){
};

this.addUser = function() {
Global.bimServerApi.call("ServiceInterface", "addUser", {
username: $(".adduser .inputUsername").val(),
name: $(".adduser .inputName").val(),
type: $(".adduser .selectType").val(),
selfRegistration: false,
resetUrl: Global.baseDir + "?page=ResetPassword"
}, function(data){
main.showUser(data);
});
};

$(".adduser .addButton").click(othis.addUser);
$(".adduser .inputName").keypress(function(event){
if (event.which == 13) {
event.preventDefault();
othis.addUser();
}
});
$(".adduser .inputUsername").focus();
}
</script>


1 Answer
1

Your question is very vague. But I feel like you have included bootstrap in your HTML file as a script tag, but you have not added the bootstrap classes to your elements.

For more info, read:
https://getbootstrap.com/docs/4.0/getting-started/introduction/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.