i have a problem with Bootstrap 4. Left box does not align with a right box. There is a HTML and CSS. How can I solve this problem?
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Section Title</h1>
</div>
<div class="col-md-6">
<div class="left-box">
<img src="images/category-1.jpg" alt="" class="img-fluid">
</div>
<div class="left-box">
<img src="images/category-2.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<div class="right-box">
<img src="images/category-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
CSS:
.left-box{ position:relative; padding-top:30px;}
.right-box{position:relative; padding-top:30px;}
1
Thank you.
There is two kind of Container in Bootstrap, in your case container-fluid is more adapted.
Change container to container-fluid
Related
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.
I need to design grid using bootstrap, like in the picture that I have uploaded.Please help me.
I think something along the lines of
<div class="col-sm-4">
<div class="content-here">
<img src="img1.jpg" />
</div>
</div>
<div class="col-sm-8">
<div class="boxes">
Box 1
</div>
<div class="boxes">
Box 2
</div>
<div class="boxes">
Box 3
</div>
<div class="boxes">
Box 4
</div>
</div>
CSS
.content-here { height: 400px; }
.boxes { float:left; width:50%; height:200px; }
The grid system code might look like this :
<div class="row">
<div class="col-sm-4">
<img src="example.jpg">
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<img src="example.jpg">
</div>
<div class="col-sm-12">
<img src="example.jpg">
</div>
</div>
</div>
After that, you can specify the width and height of each image. If you want your image to take a full width (means taking all space of the column), you can set width:100%.
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.
i want to center all the content of the div inside the container.
i tried to use margin 0 auto and it didnt work
how can i center it?
<div class="container">
<div class="text-center" style="margin:0 auto;overflow:auto;">
<div style="float:left;width:15%;margin-right:2px;">
<img src="PICTURES/Bruce-Crocker_311x312(2).jpg" class="img-responsive" />
<div class="contenthover">
<p>bla</p>
</div>
</div>
<div style="float:left;width:15%;margin-right:2px;">
<img src="PICTURES/Bruce-Crocker_311x312(2).jpg" class="img-responsive" />
<div class="contenthover">
<p>bla</p>
</div>
</div>
</div>
Can anyone help?
Use the Bootstrap center-block class on any block elements you want to center, use text-center for text..
<div class="container">
<div>
<img src="PICTURES/Bruce-Crocker_311x312(2).jpg" class="center-block img-responsive">
<div class="text-center">
<p>bla</p>
</div>
</div>
</div>
http://www.bootply.com/65YSFBl6mF