Bootstrap fill the remaining height
so i have using bootstrap grid and having trouble to handle the empty space created when the div don't fill the entire height like this
when i have this kind of configuration
<div class="row">
<div class="col-lg-8"> <div>diklat bkcu</div></div>
<div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
<div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
<div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>
what i want to get is to be like this
i can get this by using this layout
<div class="row">
<div class="col-lg-8">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4">
<div>peserta diklat bkcu</div>
<div>tabel perkembangan</div>
</div>
</div>
but the question is how do i get this desktop layout (second image) with the mobile layout that look like this???
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
css bootstrap-4
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
add a comment |
so i have using bootstrap grid and having trouble to handle the empty space created when the div don't fill the entire height like this
when i have this kind of configuration
<div class="row">
<div class="col-lg-8"> <div>diklat bkcu</div></div>
<div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
<div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
<div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>
what i want to get is to be like this
i can get this by using this layout
<div class="row">
<div class="col-lg-8">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4">
<div>peserta diklat bkcu</div>
<div>tabel perkembangan</div>
</div>
</div>
but the question is how do i get this desktop layout (second image) with the mobile layout that look like this???
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
css bootstrap-4
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53
add a comment |
so i have using bootstrap grid and having trouble to handle the empty space created when the div don't fill the entire height like this
when i have this kind of configuration
<div class="row">
<div class="col-lg-8"> <div>diklat bkcu</div></div>
<div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
<div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
<div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>
what i want to get is to be like this
i can get this by using this layout
<div class="row">
<div class="col-lg-8">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4">
<div>peserta diklat bkcu</div>
<div>tabel perkembangan</div>
</div>
</div>
but the question is how do i get this desktop layout (second image) with the mobile layout that look like this???
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
css bootstrap-4
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
so i have using bootstrap grid and having trouble to handle the empty space created when the div don't fill the entire height like this
when i have this kind of configuration
<div class="row">
<div class="col-lg-8"> <div>diklat bkcu</div></div>
<div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
<div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
<div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>
what i want to get is to be like this
i can get this by using this layout
<div class="row">
<div class="col-lg-8">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4">
<div>peserta diklat bkcu</div>
<div>tabel perkembangan</div>
</div>
</div>
but the question is how do i get this desktop layout (second image) with the mobile layout that look like this???
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
css bootstrap-4
css bootstrap-4
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
edited Jan 20 at 14:31
Laurensius Tony
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
asked Jan 20 at 14:15
Laurensius TonyLaurensius Tony
64521031
64521031
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53
add a comment |
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53
add a comment |
1 Answer
1
active
oldest
votes
you may try to use this
<div class="row ">
<div class="col-lg-8 d-sm-none">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4 d-sm-none">
<div class="row">peserta diklat bkcu</div>
<div class="row">tabel perkembangan</div>
</div>
<div class="col-sm-12 d-none">diklat bkcu</div>
<div class="col-sm-12 d-none">peserta diklat bkcu </div>
<div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
<div class="col-sm-12 d-none">tabel perkembangan </div>
</div>
You only want the mobile that working this without the space right?
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
Try on this method, if you want to specific on the mobile version.
answered Jan 20 at 14:21
BenBen
1238
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277338%2fbootstrap-fill-the-remaining-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you may try to use this
<div class="row ">
<div class="col-lg-8 d-sm-none">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4 d-sm-none">
<div class="row">peserta diklat bkcu</div>
<div class="row">tabel perkembangan</div>
</div>
<div class="col-sm-12 d-none">diklat bkcu</div>
<div class="col-sm-12 d-none">peserta diklat bkcu </div>
<div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
<div class="col-sm-12 d-none">tabel perkembangan </div>
</div>
You only want the mobile that working this without the space right?
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
Try on this method, if you want to specific on the mobile version.
answered Jan 20 at 14:21
BenBen
1238
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
add a comment |
you may try to use this
<div class="row ">
<div class="col-lg-8 d-sm-none">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4 d-sm-none">
<div class="row">peserta diklat bkcu</div>
<div class="row">tabel perkembangan</div>
</div>
<div class="col-sm-12 d-none">diklat bkcu</div>
<div class="col-sm-12 d-none">peserta diklat bkcu </div>
<div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
<div class="col-sm-12 d-none">tabel perkembangan </div>
</div>
You only want the mobile that working this without the space right?
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
Try on this method, if you want to specific on the mobile version.
answered Jan 20 at 14:21
BenBen
1238
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
add a comment |
you may try to use this
<div class="row ">
<div class="col-lg-8 d-sm-none">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4 d-sm-none">
<div class="row">peserta diklat bkcu</div>
<div class="row">tabel perkembangan</div>
</div>
<div class="col-sm-12 d-none">diklat bkcu</div>
<div class="col-sm-12 d-none">peserta diklat bkcu </div>
<div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
<div class="col-sm-12 d-none">tabel perkembangan </div>
</div>
You only want the mobile that working this without the space right?
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
Try on this method, if you want to specific on the mobile version.
answered Jan 20 at 14:21
BenBen
1238
you may try to use this
<div class="row ">
<div class="col-lg-8 d-sm-none">
<div>diklat bkcu</div>
<div>grafik perkembangan gerakan</div>
</div>
<div class="col-lg-4 d-sm-none">
<div class="row">peserta diklat bkcu</div>
<div class="row">tabel perkembangan</div>
</div>
<div class="col-sm-12 d-none">diklat bkcu</div>
<div class="col-sm-12 d-none">peserta diklat bkcu </div>
<div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
<div class="col-sm-12 d-none">tabel perkembangan </div>
</div>
You only want the mobile that working this without the space right?
+---------------------------------+
| diklat bkcu |
+---------------------------------+
| grafik perkembangan gerakan |
+---------------------------------+
| peserta diklat bkcu |
+---------------------------------+
| tabel perkembangan |
+---------------------------------+
Try on this method, if you want to specific on the mobile version.
answered Jan 20 at 14:21
BenBen
1238
edited Jan 20 at 14:37
answered Jan 20 at 14:21
BenBen
1238
answered Jan 20 at 14:21
BenBen
1238
answered Jan 20 at 14:21
BenBen
1238
1238
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
add a comment |
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
hmmm maybe i write it wrong or you read it wrong but what i want is the second mobile view.... with the layout for the desktop of the second image... your solution is pretty much a copy paste from what i mentioned above
– Laurensius Tony
Jan 20 at 14:23
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
Ok, you want the mobile layout like the second picture that you posted? Is that correct?
– Ben
Jan 20 at 14:29
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
please re-read my question
– Laurensius Tony
Jan 20 at 14:30
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
Please check the updated version to see is that what you ask for.
– Ben
Jan 20 at 14:37
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
that is not a very good way in term of performance, since it simply just hide the component at specific screen size and the result is you having duplicate component which is hidden
– Laurensius Tony
Jan 20 at 14:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277338%2fbootstrap-fill-the-remaining-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
See this:w3schools.com/bootstrap/bootstrap_grid_examples.asp
– i_th
Jan 20 at 14:53