I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
See the attachment.
I have 6 logos at the top and 7 logos at the bottom that sticks out of the screen. How to create the bottom div to be non-responsive?
Add a fixed width on it. In pixels.
width: 700px;
Update:
Remove these divs from the page to get the desired effect:
<div class="partner-divider"></div>
You'd need to set the display property to: inline-block
<div style="display: inline-block">Text</div>
If you change your mind and want it responsive:
HTML:
<div id="myDiv"> Content </div>
CSS:
#myDiv
{
min-height: 100%;
max-height: 100%;
}
References:
How to make div not larger than its contents?
Make div NOT auto stretch to container width
Div 100% height of page responsive
Hope this will help you something like this.
<div class="col-md-6">
<div style="width: 500px;">
<div class="box" id="A"></div>
<div class="box" id="B"></div>
<div class="box" id="C"></div>
<div class="box" id="D"></div>
<div class="box" id="E"></div>
<div class="box" id="F"></div>
<div class="box" id="G"></div>
<div class="box" id="H"></div>
<div class="box" id="I"></div>
</div>
</div>
I'm building a Carousel-type component, but am having some difficulty getting it to work just right.
My basic approach is a div (wrapper) with lots of other divs (items) in it. I want to display 4 items on the carousel at any one time. The items have various content heights, but the heights of the items should be equal (to the largest required).
I can't work out the CSS combination I need to get this to work correctly.
With this setup (HTML + CSS at bottom of post), the width: 25%; on each item-container is ignored.
If I add a fixed with to .item, then the 25% kicks in, but the item width is unknown -- it depends on the browsers size. Setting it to 1000px means you lose content from the item. Setting it to ~210px works, but when you start shrinking your browser, you lose content. On a large browser, you have excessive spacing.
Curiously, if I add flex-wrap: wrap to the CSS, then the 25% width is applied correctly -- but I can't do that, because then it's not a carousel! Example
The scenario is simple:
An unknown amount of items in a div with overflow: auto, which are equal heights should be displayed, with 4 of the children divs on the screen at any one time.
My HTML is structured as follows:
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
My CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
Note, this is my MCVE. On my real component, I have buttons for scrolling left and right, the content is significantly more complex and stuff like that.
All you need is to add flex: 0 0 auto to .item-container elements.
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>
I currently have two containers. One of the containers has two divs stacking ontop of each other (a img and text). That is fine. But it seems the bottom container is stacking ontop of the 1st container.
<div class="container">
<div id='map'>
<div id='image'>
<img src="/static/usa.png">
</div>
<div id='states'>
<div class="col-md-12">
<center>
<h2>Select Your State</h2>
Select your state from the list below to find information specific to your area.
</center>
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
</div>
</div>
</div>
<div class="container">
<center>
<h1>Information on ...</h1>
This site is a beta framework
</center>
</div>
and my css file is
img {
width:100%;
opacity: 0.4;
}
#map { position: relative; }
#image {position: absolute;}
#states {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;}
a {
color: black;
}
try adding clear:both; to the bottom container
I answered it by instead of trying to stack the images just setting it to a background image static.
body {
background-image: url("/static/usa.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
I'm using the bootstrap framework and trying to get an image centered horizontally without success..
I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
What's the easiest method to get an image centered relative to the page?
Twitter Bootstrap v3.0.3 has a class: center-block
Center content blocks
Set an element to display: block and center via margin. Available as a mixin and class.
Just need to add a class .center-block in the img tag, looks like this
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
In Bootstrap already has css style call .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
You can see a sample from here
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Update 2018
The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...
<img src="..." class="mx-auto d-block"/>
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
Twitter bootstrap has a class that centers: .pagination-centered
It worked for me to do:
<div class="row-fluid">
<div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>
The css for the class is:
.pagination-centered {
text-align: center;
}
You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />
Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:
.row .span4 {
text-align: center;
}
Edit
As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3
Works for me. try using center-block
<div class="container row text-center">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
I need the same and here I found the solution:
https://stackoverflow.com/a/15084576/1140407
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }
I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.
<div class="container-fluid">
<div class="row justify-content-center">
<img src="logo.png" />
</div>
</div>
Seems we could use a new HTML5 feature if the browser version is not a problem:
in HTML files :
<div class="centerBloc">
I will be in the center
</div>
And in CSS file, we write:
body .centerBloc {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And so the div could be perfectly center in browser.
Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
You should use
<div class="row fluid-img">
<img class="col-lg-12 col-xs-12" src="src.png">
</div>
.fluid-img {
margin: 60px auto;
}
#media( min-width: 768px ){
.fluid-img {
max-width: 768px;
}
}
#media screen and (min-width: 768px) {
.fluid-img {
padding-left: 0;
padding-right: 0;
}
}
I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
A lot of the above options didn't work for me.
However, this worked!
<div class="container">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
</div>
</div>
IN Bootstarp 5.0
Use
.mx-auto .d-block
You could change the CSS of the previous solution as below:
.container, .row { text-align: center; }
This should center all the elements in the parent div as well.