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
Related
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
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've created an img-circle to be placed on the same row as a paragraph of text using two .col-xs-6, but my image is spilling over the margin of the container.
I have tried changing the padding to 0, but that didn't work.
I don't have any CSS styling for the img-circle currently.
<div class="container about">
<div class="row">
<div class="col-xs-6">
<p class="hello">Hello,</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="intro">text from paragraph here</p>
</div>
<div class="col-xs-6">
<img class="profile-pic img-circle" src="#"/>
</div>
</div>
you need to use class .img-responsive in img, see Bootstrap Docs
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%;,
height: auto; and display: block; to the image so that it scales nicely to the parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container about">
<div class="row">
<div class="col-xs-6">
<p class="hello">Hello,</p>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="intro">text from paragraph here</p>
</div>
<div class="col-xs-6">
<img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" />
</div>
</div>
</div>
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 have two problems:
Divs aren't aligned properly
How to force thumbnail images to be lined horizontally, and with a horizontal scrollbar (for scrolling) if the thumbnail images exceed the width of the div they're in?
I don't want to use any external js librarys. I am trying to get it to work in pure css and bootstrap 3.
Here is what I have currently so far:
<div class="row">
<div class="col-md-10">
<div class="item">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-5">
<div class="main-img">
<img height="500px" width="500px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="img-list">
<div class="col-md-3">
<img width="100px" height"100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<span> Title! </span>
<span> Some other text!</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<!-- Some other html here -->
</div>
</div>
I drew an image of what the layout should be:
The brown area is col-md-10 which contains the following things:
pink area is the main img (col-md-5)
dark grey area beneath the pink is the horizontal list of thumbnail images (thumbnails are col-md-3, not sure if that's best?)
light grey area is just the text descriptions (col-md-7)
I didn't draw the col-md-2 though (which is on the right of the col-md-10 brown area).
Instead, I see a bunch of divs flying all over the place. The thumbnail list is floating at the top right, but the main img and the col-md-7 is correctly side-by-side. The thumbnail list isn't even aligned properly. Can someone help?
Here ya go...
http://jsfiddle.net/MUVG5/
<div class="row">
<div class="col-md-10">
<div class="item">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<div class="main-img">
<img height="500px" width="500px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="img-list">
<div class="col-md-3">
<img width="100px" height"100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
<div class="col-md-3">
<img width="100px" height="100px" class="img-responsive" src="http://cdn.theatlantic.com/static/mt/assets/science/firefox-logo.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<span> Title! </span>
<span> Some other text!</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<!-- Some other html here -->
</div>
</div>
If you don't want your thumbs to collapse: http://jsfiddle.net/MUVG5/1/