Currently, I am in the process of creating a web application using Bootstrap 4.3.1 and integrating the Spotify API. My main goal right now is to center a div element on the screen both vertically and horizontally, which will display the authenticated user's username. However, I have encountered an issue when trying to achieve this if the div is located within a script tag. Is there any workaround for this problem? Below is a snippet from my index.html file and style.css file.
Index.html
<script id="user-info-template" type="text/x-handlebars-template">
<div class="container h-100 d-flex justify-content-center">
<div class="jumbotron my-auto text-center">
<h1 class="display-4">Welcome, {{display_name}}.</h1>
<h4 class="display-5">Select one of your playlists to get started.</h4>
</div>
</div>
</script>
Style.css
html,
body {
height: 100%;
}
EDIT I appreciate all the suggestions provided so far. Many have pointed out that having div tags within script tags is not recommended. However, I am following an example set by Spotify, where they embed JS code within the index.html file and use Handlebars in the following manner:
From their Index.html
<script id="user-profile-template" type="text/x-handlebars-template">
<h1>Logged in as {{display_name}}</h1>
<div class="media">
<div class="pull-left">
<img class="media-object" width="150" src="{{images.0.url}}" />
</div>
<div class="media-body">
<dl class="dl-horizontal">
<dt>Display name</dt><dd class="clearfix">{{display_name}}</dd>
<dt>Id</dt><dd>{{id}}</dd>
<dt>Email</dt><dd>{{email}}</dd>
<dt>Spotify URI</dt><dd><a href="{{external_urls.spotify}}">{{external_urls.spotify}}</a></dd>
<dt>Link</dt><dd><a href="{{href}}">{{href}}</a></dd>
<dt>Profile Image</dt><dd class="clearfix"><a href="{{images.0.url}}">{{images.0.url}}</a></dd>
<dt>Country</dt><dd>{{country}}</dd>
</dl>
</div>
</div>
</script>
At the bottom of their Index.html
<script>
(function() {
/**
* Obtains parameters from the hash of the URL
* @return Object
*/
function getHashParams() {
...
}
var userProfileSource = document.getElementById('user-profile-template').innerHTML,
userProfileTemplate = Handlebars.compile(userProfileSource),
userProfilePlaceholder = document.getElementById('user-profile');
...
$.ajax({
url: 'https://api.spotify.com/v1/me',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
userProfilePlaceholder.innerHTML = userProfileTemplate(response);
$('#login').hide();
$('#loggedin').show();
}
});
...
}