The bootstrap grid system divides the entire screen into 12 pieces, so I created a row and then divided it into two columns and put an image and some texts on both the columns but they are coming one after another not inline
<div class="row">
<div class="col-lg-6">
<img src=""> (text)
<div class="col-lg-6">
<img src=""> (text)
</div>
I am expecting a result where there would be two images in one row and some texts after each image
You need to ensure that you've closed all your divs correctly. This means you will need to close your first column <div> and then your row <div>.
You should also apply CSS to the images themselves to keep them within the confines of their columns. In the example below I've made it so the images span the entire width and have an automatic height (so it keeps its aspect ratio).
Rows should also be kept within a container. You can either use the container or container-fluid class to specify what sort of container you would like.
Keep in mind that you've used col-lg-*, and so lg means that your columns will collapse when on large screen sizes. Running the snippet below will cause the two columns to stack (as it is a small screen) but you can see the two columns side-by-side in the one row by expanding the code snippet view:
.img {
height: auto;
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<img class="img" src="https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
<p>(text)</p>
</div>
<div class="col-lg-6">
<img class="img" src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
<p>(text)</p>
</div>
</div>
</div>
Related
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.
I just want to be sure about some basic HTML structuring.
Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.
All nice and easy there.
My question is, am I "correct" or not to place columns and rows within separate containers?
This is what I mean:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
Some Content
</div>
</div>
</div>
</div><!-- end body -->
I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.
I just want to be sure, thanks!
As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.
This approach also depends heavily on the design.
Full page width div, YES, the separate container is correct.
Note : For full width
Use container-fluid for full width, and remove the padding as well.
container-fluid class has padding-left : 15px and padding-right: 15px.
You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.
I am working on a code on the online training I am taking on bootstrap. I am following the exact steps as mentioned in the training but in my result the height of the row I am creating is much higher than it should be.
So the training is on Bootstrap 3, but I am using bootstrap 4 (in case that is important information). I create a row and then two columns each col-md-2 for img and then put images on them. But then the height of the columns are much higher than what it should be.
<div class="container">
<div class="row">
<img src="images/carousel-1.jpg" alt="1" class="col-md-2" />
<img src="images/carousel-2.jpg" alt="2" class="col-md-2" />
</div>
</div>
I want the height of columns to be the size of the images with acceptable padding and margin, and not 3 to 4 times bigger.
Picture of my website:
You can also add class="img-responsive" to each img element. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="images/carousel-1.jpg" alt="1"/>
<img src="images/carousel-1.jpg" alt="1"/>
</div>
</div>
</div>
I am displaying 4 cards each row using a card deck:
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
<div class="row">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
...
The cards within each deck are the same width, but the decks are not, i.e. the deck of the 2nd row is wider than the deck of the 1st row. How do I get the decks to be of the same width?
I have tried setting .card-decks{width: 100%;}, which works for full rows, but distorts cards of rows that have just 1-2 cards.
Additional CSS:
My images are of different sizes, that's why I added the following CSS to make them the same. No other CSS should affect the cards:
.img-adjusted{
position: relative;
float: left;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
Also, I want to keep the style responsive, so would like to avoid hardcoding pixel set pixel widths.
Don't put .card-deck in a .row. Only .col- columns should be placed in rows...
content must be placed within columns and only columns may be
immediate children of rows.
You should use...
<div class="row">
<div class="col-12">
<div class="card-deck">
<!-- 4 of these -->
<div class="card">
<img class="card-img-top img-adjusted" >
<div class="card-body">...</div>
</div>
</div>
</div>
</div>
The 2nd part of the question...
When using card-deck (and card-group), cards will always fill the width of the next visual row. If you have less than 4 cards in each row, the remaining cards will fill the width across. To workaround this, set a max-width for each card..
.card-deck .card {
max-width: calc(25% - 30px);
}
https://www.codeply.com/go/ygvZvjsELs
Alternatively, You can use the grid columns to wrap the cards. This is explained here: Bootstrap 4 card-deck with number of columns based on viewport
I have two columns of divs, that I want to display like this.
<div id="cont">
<div class="left">
<div id="d1">1left</div>
<div id="d3">3left</div>
<div id="d5">5left</div>
</div>
<div class="right">
<div id="d4">4right</div>
<div id="d2">2right</div>
<div id="d6">6right</div>
</div>
</div>
However, for purposes of creating a responsive design I don't want to use containers, and I would prefer to not use JS for basic formatting purposes.
The problem with this, is that simply floating containers left and right creates "rows," as you can see here (3left is pushed right due to the increased size of 1left).
Is it possible to create columns of multiple divs without using containers or JS, and if so, how?
Here is my attempt:
.left {
float:left;
width: 185px;
clear:both;
}
.right {
margin-left:185px;
}
Basically, whatever width you set for .left, use that for margin-left in .right. This way you don't have to use the float property on both the div.
UPDATE #1
In .left, add:
clear:both;
JSFiddle Demo
UPDATE #2
For the extra space in the left column (if other columns on the right are larger), use:
margin-top:-50px; // (Other columns height minus the shorter left column's height.)
On the left columns below the one with a shorter height.
JSFiddle Demo
I suggest using the Bootstrap (http://getbootstrap.com/) and create your "grid" like:
<div class="container-fluid">
<!-- left column -->
<div class="col-md-6">
</div>
<!-- right column -->
<div class="col-md-6">
</div>
</div>
With Bootstrap you can specify different layout for various device sizes by just adding some CSS classes. For example if you want to have two columns in large screens and just one in mobile you can add classes like:
<div class="container-fluid">
<!-- left column in medium screens and up -->
<!-- just one column in small screens -->
<div class="col-xs-12 col-md-6">
</div>
<!-- right column in medium screens and up -->
<!-- just one column in small screens -->
<div class="col-xs-12 col-md-6">
</div>
</div>
DEMO:
http://www.bootply.com/f1zspwlokR