I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.
<div class="row">
<div class="col-6">
<img class="img-fluid"
src="img/1.PNG">
</div>
<div class="col col-5 d-none d-md-block">
<img class="img-fluid"
src="img/2.PNG">
</div>
</div>
Image of code and example
That should work just fine if you take all the extra bits from the Row classes and just have class="row" Your column widths are both set to 5 though, 6 would be ideal for centering.
To assist with sleeker code, on the img classes try removing it all except for img-fluid
Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:
Use col-md-6 on both the images in place of col col-5. Your images will align themselves side by side from medium and up.
Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.
For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="col-6 col-lg-6 col-sm-6">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.
Related
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
I have an image and text in the same row with the image coming first and the text to the left of it. What I am trying to do is make the text show above the image when screen is shrunk to the small breakpoint and when resized the image goes back to the left. I have the Image tag below the Text tag. Here is my code.
<div class="container-fluid">
<div class="row">
<div class="col-md-10 order-2 col-sm-10 order-1 flex-column">
<h2>Alignment</h2>
<p> Alignment helps organize and order the content, controlling how the eye flows from one
component to the next. It is the organization and creation of invisible lines. Without
alignment, users will have a hard time recognizing how elements relate to eachother, and
your page will look messy and disorganized.</p>
</div>
<div class="col-md-2 order-1 col-sm-2 order-2 flex-column">
<img src="carp4.jpg" class="">
</div>
</div>
</div>
You don't need to reverse the order from 1 to 2, since both breakpoints are reversed in the same order. If needed tho, switch it on a breakpoint like order-1 order-sm-2.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 order-2">
<h2>Alignment</h2>
<p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
</div>
<div class="col-sm-2 order-1">
<img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
</div>
</div>
</div>
You could also use flex-column-reverse for extra small screens and flex-sm-row-reverse for small screens and up. This way you can avoid using order-*. The order-* is handy in case of more than 2 columns.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex-column-reverse flex-sm-row-reverse">
<div class="col-sm-10">
<h2>Alignment</h2>
<p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
</div>
<div class="col-sm-2">
<img src="https://picsum.photos/100/100" alt="" class="img-fluid w-100" />
</div>
</div>
</div>
BUT, this seems overcomplicating things if you can switch the image and text columns around.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<img src="https://picsum.photos/150/100" alt="" class="img-fluid w-100" />
</div>
<div class="col-sm-10">
<h2>Alignment</h2>
<p>Alignment helps organize and order the content, controlling how the eye flows from one component to the next. It is the organization and creation of invisible lines. Without alignment, users will have a hard time recognizing how elements relate to eachother, and your page will look messy and disorganized.</p>
</div>
</div>
</div>
Here's a jsfiddle to resize the result and play around.
<br>
<h6>
This row/deck contains two elements. You can see that even with col-md-4 it spans more than 2/3 of the width.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div> <br><br>
<h6>
This row/deck contains three elements. You can see that each card spaces 1/3 of the width as expected.
</h6>
<div class="flex-row">
<div class="card-deck">
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
<div class="card col-12 col-md-4">
</div>
</div>
</div>
</div>
https://jsfiddle.net/9e85Lb0y/
In this example there are two flex-rows each containing a card deck. The first deck has 2 cards and the second deck has 3 cards. All of the cards are identical. Why is it that the top row has wider cards? I would have expected the top row to have the same widths as the bottom row.
Columns aren't meant to be inside card-deck. They're only supposed to be contained in .row. The cards would go inside the columns.
From the Bootstrap docs...
"Rows are wrappers for columns... In a grid layout, content must be
placed within columns and only columns may be immediate children of
rows."
If you're trying to set widths for the cards in card-decks, see:
Bootstrap 4 card-deck with number of columns based on viewport, or
bootstrap 4 card-deck containing cards with different width
TLDR
Use flex-row and col-* to explicitly specify widths. Use card-deck and card to create evenly sized blocks. Avoid mixing the two, they are not designed for use together straight out of the box.
Long Answer
The issue here is most likely caused by the mixture of both the flex-row and card-deck classes. While both offer very similar functionality, there are some key differences which separate how they behave.
The card-deck class simply guarantees that any immediate elements with the card class are all the same width as one another.
<div class="card-deck">
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
<div class="card">
<!-- Content -->
</div>
</div>
Every <div class="card"></div> will now become a uniform width. They are not guaranteed to fill the whole of their parent container. The card class also applies left and right margins of 15px to keep them separated.
<div class="flex-row">
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
<div class="col-4">
<!-- 1/3 Width Column -->
</div>
</div>
The flex-row and col-* classes on the other hand allow you to create columns of specific size. Each col-* class simply applies a width to the element, the onus is on you to make sure your content will fit appropriately at each breakpoint. col's SHOULD NOT have any margins applied as CSS width declarations do not account for margins.
Hi all I am using Bootstrap 4 and have a column with an image like below:
<div className='col-xs-12 col-sm-5 col-md-4 col-lg-3'>
<img src={movie.Poster} className='movie-poster img-fluid mx-auto d-block' />
</div>
My issue is I want to center the image as above when the screen size activates col-xs-12 and col-sm-5 but when screen is bigger such as col-md-4 or col-lg-3 I don't want to center the image. Is there a way to conditionally do things when at certain screen sizes?
Thanks in advance.
Yes. You should follow this notation: https://getbootstrap.com/docs/4.0/utilities/spacing/#notation
In your case, you should use: mx-auto mx-lg-0
<img src={movie.Poster} class='movie-poster img-fluid mx-auto mx-lg-0 d-block' />
mx-auto: for xs, sm and md with margins left and right auto.
ml-lg-0: for lg and xl with margin left 0. You can use mx-lg-0 too if you need.
Yes, the mx-auto class is responsive. So, if you use mx-md-auto, then that will apply that class only from the medium (md) screens onwards.
However, that won't make any difference in your case because you are also using the img-fluid class. That will fill out the entire column with the image. In other words, it's pointless trying to center an image while at the same having a class that auto-stretches the image to fill out the entire width of the column.
Here's a code snippet to show that it works (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-5 col-md-4 col-lg-3 bg-secondary">
<p>Lorem ipsum.</p>
<img src="https://placeimg.com/50/50/animals" class="movie-poster img-fluid mx-md-auto d-block" />
</div>
</div>
</div>
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>