Bootstrap align div correctly - html

I am trying to set 2 div elements next to each other by using bootstrap
code:
<div class='col-12'>
<div class='row'>
<div class='col-6'>
</div>
<div class='col-6'>
</div>
</div>
</div>
this works fine the only thing is that when the window width gets to small
the divs overlap. when it gets to small I want to set the divs beneath each other
and col-6 then has to be col-12
How can I achieve this?


You can use the sm breakpoint...
https://www.codeply.com/go/QGmvcPu7Ts
<div class='col-md-12'>
<div class='row'>
<div class='col-sm-6'>
</div>
<div class='col-sm-6'>
</div>
</div>
</div>


You should use have read the Bootstrap Grid System to make them align in every screen width.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class='col-12'>
<div class='row'>
<div class='col-md-6 col-sm-12 col-12'>
lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM
</div>
<div class='col-md-6 col-sm-12 col-12'>
lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM lOREM ePSUM
</div>
</div>
</div>


<div class='col-12'>
<div class='row'>
<div class='col-6 col-xs-12'>
</div>
<div class='col-6 col-xs-12'>
</div>
</div>
</div>

Related

How to make a blank div in bootstrap with no text inside full with a bg-color

How to display 3 lines inline side by side in bootstrap? I have a serious problem in the height and the width! If I use css only it displays. However when I want to use bootstrap I am getting stuck.
Here the code using CSS with only one line! The same process for the remaining two lines:
<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"
How to do it using bootstrap? Should I use a parent class to get the height and the width?

You was thinking of something like this?
<div class="col-lg-3 text-center bg-secondary" style="height:200px;width:auto"></div>

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
</div>
</div>

How to make responsive two columns in a row? In first text, in second image in bootstrap 4

How to make two columns in a row, one with text, second with image in Bootstrap 4 to be full responsive? I want to make a something like in this picture:
<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-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>
enter image description here
How to make the image always have the same parameters as div with text, to be full responsive?

Set image width to 100% so that it won't be overflowed to the next block.
Check out this.
Since bootstrap uses display:flex all the blocks inside the div row will have same height.
.col-md-6 img{width:100%;}
<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-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>
Also a codepen: https://codepen.io/Ev1tw1n/pen/GPGvmd
Note: If you want the text content centered use align-items:center;

add img-fluid class to both images.
or you can media of bootstrap 4 check below link.
thanks.
https://getbootstrap.com/docs/4.0/layout/media-object/
<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-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<img class="img-fluid" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-md-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>

add this to your css
img{
min-width:100%;
min-height:100%;
max-height:100%;
max-width:100%;
}
Here is a working fiddle https://jsfiddle.net/fk04wndL/

Hope this is useful.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.img-section{
width:100%;
height:400px;
}
.text {
height: 380px;
}
</style>
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<img class="img-section" src='https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg' alt=''>
</div>
<div class='col-sm-6'>
<div class='text'>
<h2>Test test</h2>
<p>Lorem pep lorem pep lorem pep lorem pep lorem </p>
</div>
</div>
</div>
</div>

Cannot fit two Jumbotrons Horizontally (Bootstrap)

I'm new to bootstrap and I am having some trouble getting two jumbotrons to sit on one row (without space in between.) No matter how small I make their respective columns, they stay on separate rows.
Here is my HTML:
<div class="col no-gutters">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
I have not messed with the default bootstrap CSS. Thank you in advance!!!

The class of the containing div should to be row, not col:
<div class="row no-gutters">

Bootstrap's Grid system has column spacing (padding) by default. There are a few ways to address this issue to adapt to your requirements.
One approach could be to add a new CSS selector, and then modify your HTML accordingly.
CSS:
/* Add this */
.no-padding {
padding-right:0;
padding-left:0;
}
HTML:
<div class="col">
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>

Aligning content (Vertically and Horizontally) in a list group in Bootstrap

I have a row with three divisions:
Image (two divs, text and text) Button
The only thing I'm able to do is pulling the button to right or bottom of the div, but not centering it, how can I achieve this?
My code:
<div class="row">
<div class="col-md-9 ">
<div class="row">
<div class="col-md-12">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
</div>
<div class="row list-group-item ">
<div class="col-md-3 text-center">
<img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
</div>
<div class="col-md-5 ">
<div class="row">
<div class="col-md-6 ">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-6">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-success btn-lg pull-right">
Default
</button>
</div>
</div>
</div>
This is what I have:
This is what I want but I'm not able to achieve:
I want the button centred too

First of all no need to use this much nested rows and cols, you should try to achieve this result by using less html elements. Secondly divide your blocks into equal parts (use col-md-3 class four times).
<div class="row list-group-item ">
<div class="col-md-3 text-center vcenter">
<img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
</div>
<div class="col-md-3 vcenter">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-3 vcenter">
<h3>
h3. Lorem ipsum dolor sit amet.
</h3>
</div>
<div class="col-md-3 vcenter text-center">
<button type="button" class="btn btn-success btn-lg">
Default
</button>
</div>
</div>
Finally use vertical alignment for your divs:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
margin-left: -4px;
}
You can check fiddle here: https://jsfiddle.net/johannesMt/npgsnojf/3/
It achievs the same result by using much less html elements which makes your code more readable. Hope this helps!

First things first, You are already dividing some section which already has a width of 100%. (by using two col-6 inside a row). So that means they've been already expanding as far as possible in that row.
You should increase the col number in
<div class="col-md-5 ">
meanwhile decreasing button column
<div class="col-md-4">
In the end, you can design your structure in the following way:
<div class="row">
<div class="col-md-6 text-center">
<div class="centered-block">
<div>h3. Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<div class="col-md-6 text-center">
<div class="centered-block">
<h3>h3. Lorem ipsum dolor sit amet.</h3>
</div>
</div>
</div>
with the following css rule:
.centered-block {
display: inline-block;
position: relative;
width: 100px; /* you would like to have a fixed width */
}
.centered-block > h3 {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
Haven't tested it out, but that should work.

Cols are not inline in Bootstrap

I just started learning bootstrap and I have an issue of cols not displaying inline even when they are in the same row.
Code:
<div class="container">
<div class="row">
<div class="col-sx-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-sx-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>
Expected Result: http://i.imgur.com/KygHf0g.png
Actual Result: http://i.imgur.com/2bR6fXg.png
JSfiddle: http://jsfiddle.net/ojhLm1vt/
I include Bootstrap the following manner:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" media="screen">

It's col-xs-*, not col-sx-*.
FIDDLE
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-xs-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>