I am using bootstrap 4. Below is my html
<div class="container">
<div class="row text-center ">
<div class="col-lg-6">A</div>
<div class="col-lg-6">B</div>
</div>
</div>
This code works fine on the website. However, on mobile or when I resize the browser to be very narrow, the 2 classes col-lg-6 stack on top of each other with quite a lot vertical space between them. I wonder is there any way to reduce that space?
space could be caused by either margin or padding... to set:
padding bottom to zero, use class pb-0
padding top to zero, use class pt-0
margin bottom to zero, use class mb-0
margin top to zero, use class mt-0
this is the bootstrap way... more info here
Related
My div alignment is being thrown off by the default .row class. It has a margin_left and right call that adds gutters that make borders go off my div. I've turned off gutters in this element, but it causes issues elsewhere on the site.
Here is an example of code that causes an issue.
<div class="row border-top border-bottom">
<p id="body">
</p>
</div>
Here is a screen shot of the issue along with an inspect where I show the exact element I can turn off that fixes the issue.
According to the Docs using g-0 will turn off gutters for that .row.
<div class="row g-0 border-top border-bottom">
<p id="body">
</p>
</div>
Give it a try.
Only columns (col-*) should be the immediate child of row.
I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giù
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px
So i'm fetching "boxes" and dynamically adding them into the HTML document with ngFor. I don't know in advance how many of them will be there. Currently i'm using this code:
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<app-single-item [item]="item"></app-single-item>
</div>
</div>
What that gives to me:
Which is okay but the problem is I want bigger spacing between those elements. It should look like this:
To achieve the look on the second image I put width: 21% to col-xl-3 and added display: flex and justify-content: between to the row div.
But the problem is, now if I have less than 4 boxes in a row, the spacing between them is much bigger. You can see it on the image below
My question is how can I get the same spacing between boxes regardless of the number. I don't want to use fixed width on the item divs that's why I use cols. and this is important, I need those items to always show from the beginning of the outer div, so in line with the element above it. Thanks.
Simply you can use margin right class of bootstrap for each column so that it appears to take some margin from right column like this
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 mr-3">
<app-single-item [item]="item"></app-single-item>
</div>
</div>
Keep width and use justify-content-center
Edit based on comment-
Apply container class to outer div and use -
#include media-breakpoint-down(lg) {
.container {
width: 100%;
max-width: none;
}
}
Instead updating the margin or width of your elements, you should update the padding, because it won't affect the outer but the inner element.
Code example (not tested)
<div *ngIf="items && items.length" class="row">
<div *ngFor="let item of items"
class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4 pr-2 pl-2">
<app-single-item [item]="item"></app-single-item>
</div>
</div>
Then with those principles, you can choose the space you want between elements.
And plus, maybe you don't want the first and last elements having left and rightpadding, so you may use media-queries breakpoints to remove pl-2 from first element and each 2n elements for the sm breakpoint for example, and pr-2 from second element and each 2n+1 elements for the sm breakpoint, (and an other math for other breakpoints, depending on how many elements are displayed by row).
See the doc
<div class="row mt-5 d-flex">
<div class="col-md-3 p-5 mt-3">
<img id="image" class="align-self-center"
src="background1.jpg"
width="80%" height="100%"/>
</div>
<div class="col-md-4 align-self-center">
<span id="text">
text
</span>
</div>
<div class="col-md-5 background-image">
</div>
</div>
Result:
I don't know why the empty space between the rounded image and the end of column is there. I use bootstrap. I've put borders around divs with "col-md-*" in order to see the edges correctly.
I tried setting padding and margin to 0 but there weren't any changes. I think it has to do something with the "img" tag (I also tried setting it to be displayed as a block).
Check for any padding or margin. usually bootstrap adds those properties automatically with col-md-** classes. You might have to override those classes. I would use the inspect element tool to track them.
I am trying to make a page where data from a database is displayed, because I want to make it accessible on smaller devices where not all data fits on to the screen, so the user should be able to scroll from left to right. But the problem I am having now is that the scrollbar only appears when you are at the bottom of the page. Picture when the page is at bottom, The page when i scroll even up a little. So what I want as a result is to have the scrollbar always there(except when the page is large enough to display all the data.)
I have tried the answer of this post: Horizontal scrollbar only appearing at bottom of page, but unfortunetly it did not work.
My code:
<div class="container-fluid w100 h-100 mt-5">
<div class="row">
<nav style="position: fixed; "class="col-md-2 pt-5 sidebar h-100 w100">
....
</nav
<main role='main' style='background: white;' class='col-md-10 ml-auto col-lg-10 ';>
<h2 class='d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center
pt-3 pb-2 mb-3'>Afspraken:</h2>
<div class='table-responsive'><table class='table table-sm table-striped'><thead
align='left'><tr><th>Naam:</th><th>Reparatie</th><th>Telefoonnummer</th>
<th>Email</th><th>Status</th><th>Datum</th><th>Datum</th></tr></thead><tbody>```
The problem is, that you only enable the overflow-x on your table and the overflow-y on the body. My recommendation is, that you use overflow-y on your table and set a fixed height on your div with the class table-responsive.
Another option would be to add overflow-x to your body and display the whole width of the table on your body.