This question already has answers here:
Bootstrap: How to center align content inside column? [duplicate]
(2 answers)
Closed 6 years ago.
I have this code:
<div class="article-quiz-content.container">
<div class="row">
<div class="col-xs-6.quiz-cols">
<div class="true-placeholder">
<a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
</div>
</div>
<div class=col-xs-6.quiz-cols">
<div class="false-placeholder">
<a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
</div>
</div>
</div>
</div>
Which leads to this:
I need those icons to be in the center of the columns.
Suggestions?
Just add class text-center to your columns (.col-xs-6)
Reference: https://getbootstrap.com/css/#type-alignment
EDIT: after you changed markup you need to add it to placeholder divs
You can do something like this in your css:
.quiz-cols{
text-align: center;
}
.amenitie_icon{
display: inline-block;
}
Inline-block element float to center if container has text-align: center
Related
This question already has answers here:
Align the form to the center in Bootstrap 4 [duplicate]
(3 answers)
bootstrap 4: center inline form inside a jumbotron
(1 answer)
how to center form using bootstrap 4
(3 answers)
Closed 3 years ago.
.jumbotron {
background-image: url(background.jpg);
color: white;
text-align: center;
}
<div class="jumbotron">
<h1 class="display-4">My Awesome App</h1>
<p class="lead">This is why you should download this fantastic app!</p>
<p>Want to know more?</p>
<p>Join our mailing list!</p>
<hr>
<form class="form-inline" id="jumbo-form">
<div class="form-group mx-sm-3 mb-2">
<input type="password" class="form-control" id="email" placeholder="Email">
</div>
<button type="submit" class="btn btn-primary mb-2">Sign Up Now</button>
</form>
</div>
In the class of jumbotron, all content before the form is centered. However, the form is align left. I tried the solutions from other questions like adding absolute position and then margin:auto but still not working.
Your form is a flex container and flex can be horizontally center with
justify-content: center; and vertically with align-items: center (If height is enough available)
Add below css and this will center the form
.form-inline {
justify-content: center;
}
If you are using bootstrap and the i would suggest using it strictly. Surround your form within Container, row, col. If you want to give padding or margin, use bootstrap classes.
In this case:
<div class="container">
<div class="row justify-content-center">
Your Form goes here
</div>
</div>
Have a look here: https://getbootstrap.com/docs/4.4/layout/grid/
in your "form-inline" display is set to "flex" so you can add "justify-content:center;" to its css code or you can add "justify-content-center" to "class" attribute in your html.
add this class inside the container class
<div class="row justify-content-center">
Your Form
</div>
OR
<div class="row text-center">
Your Form
</div>
Usually the parent element prevent the element to get aligned as desired. It limits not only center but float as well.I tried to explain this in the following image.
Please inspect the width of the parent element.Hope you will find this helpful.
Obviously you are using Bootstrap so try this :
<div class="container"> <div class="row justify-content-center"> Your Form </div> </div>
Have a look here: https://getbootstrap.com/docs/
Or use css as following:
.
form-inline{
justify-content:center
}
This question already has answers here:
How do I add a margin between bootstrap columns without wrapping [duplicate]
(5 answers)
Closed 5 years ago.
I'm creating a card with html, css and bootstrap and I'm using the bootstrap class col to define the columns. My problem is when separating the divs, how is it possible to define 3 divs with col 4 and get a space between them without leaving the place? when I give a style of margin-left: 5px; for example, the third div goes to the bottom line
<div class="row">
<div class="col-xs-4">
<div class="card">...</div>
</div>
<div class="col-xs-4">
<div class="card">...</div>
</div>
<div class="col-xs-4">
<div class="card">...</div>
</div>
</div>
And:
.card {
margin: 0 5px;
}
This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Vertically center element with Bootstrap 3
(1 answer)
vertical-align with Bootstrap 3
(26 answers)
Closed 5 years ago.
I have 2 bootstrap col-md-6 columns that one has an image in and the other has a p tag in it with a paragraph of text. how would i dynamically vertically align the text so its perfect compared to the image next to it, code below
<div class="col-md-6">
<img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
<p>text goes here</p>
</div>
i also need to be able to do the same thing with a column that may have 3 tags in it so a h3 p and an a tag.
If you are using V4 of bootstrap you can simply rely on some class utilities and use align-items-center to achieve this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row align-items-center">
<div class="col">
<img class="img-responsive" src="https://lorempixel.com/400/200/">
</div>
<div class="col">
<p>text goes here</p>
</div>
</div>
</div>
This question already has answers here:
Vertically aligning an image to the bottom inside a bootstrap “column”?
(1 answer)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?
JSFIDDEL
HTML:
<div class="row">
<div class="col-xs-2">
<img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
<img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
<img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>
CSS:
.row {
border-bottom: 1px solid red;
position: relative;
}
.first {
}
.second {
}
.third {
}
The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.
For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.
style='margin_top:150px;'
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 years ago.
I have this page:
http://invata.dac-proiect.ro/invat/index2.html
I want my div .container-home to be align vertically to the center.
CODE HTML:
<div class="container-home" style="width: 900px;height: 696px;background: url(DECUPATE/TEST/images/ppp.jpg);margin: 0 auto;background-size: contain;">
<div class="margine">
<div class="sus">
<div class="btn"></div>
<div class="btn2"></div>
</div>
<div class="jos">
<div class="btn3"></div>
<div class="btn4"></div>
</div>
</div>
</div>
How do I do this?
I found these examples but we did not implement them.
http://www.vanseodesign.com/css/vertical-centering/
Thanks in advance!
EDIT:
I add:
body{display table;}
.container-home{display:table-cell;vertical-align;middle;}
but not working.
You need to use some savvy positioning in your CSS. Add the following to your container-home class in the CSS:
.container-home {
/* existing code */
position:relative;
top:50%;
transform:translateY(-50%);
}
The entire body of the page should be vertically and horizontally centered now.