I'm using bootstrap 2.3.2. I have a div with some wells inside. Here is a Preview
My structure is
<body>
<div class="page-header">
<h1 id="title">Title</h1>
</div>
<div class="row">
<div class="span3 my_span">
<div class="well my_well">
<h1>Text</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
<div class="span3 my_span">
<div class="well my_well">
<h1>Textr</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
<div class="span3 my_span">
<div class="well my_well">
<h1>Textr</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
</body>
The wells are inside a row div, how to center all the wells horizontally?
Here is the jsfiddle with the code.
I think this is what you were describing: Fullscreen View
See jsfiddle
I modified my_span:
.my_span {
width: 300px;
margin: 0 33px;
float: none;
display:inline-block;
}
and added:
.row {
text-align: center;
margin: 0;
}
EDIT: I edited the fiddle a bit to fix the margins.
Just use margin: 0 auto to set your divs to be centered.
.my_span {
width: 300px;
margin: 0 auto;
}
http://jsfiddle.net/BVmUL/367/
You can do
.parent-of-centered-div {
text-align: center;
}
.centered-div {
display:inline-block;
width: 20px; /* needs fixed width */
}
Related
I am trying to have buttons centered below divs...very new at coding and working my way through courses. Ideally, the buttons would be responsive and follow the divs, wherever they may be (my code could be messy, not sure, sorry if it is :P) any tips?
.items {
height:20rem;
width:20rem;
background-color:#7FDEFF;
display:inline-block;
margin:4em;
display:center;
}
.items:hover {
background-color: #9ce5ff;
}
<section id="sale">
<div class="items"></div>
<button class="buy">Add to Cart</button>
<div class="items"></div>
<button class="buy">Add to Cart</button>
<div class="items"></div>
<button class="buy">Add to Cart</button>
</section>
</body>
</html>
You may try to wrap each one with a wrapper element (.content-wrapper).
You can check the code below.
.items {
height:20rem;
width:20rem;
background-color:#7FDEFF;
margin:4em;
}
.content-wrapper{
display:flex;
flex-direction:column;
width:20rem;
align-items:center;
}
<section id="sale">
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="content-wrapper">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
</section>
You can also do it without using flex, see below:
.column {
text-align:center;
margin-bottom: 1rem;
padding: .5rem;
width: 10rem;
}
.items {
width: 100%;
background-color: #7FDEFF;
padding: 40px 0px;
margin-bottom: 10px;
}
.items:hover {
background-color: #9ce5ff;
}
<section id="sale">
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
<div class="column">
<div class="items"></div>
<button class="buy">Add to Cart</button>
</div>
</section>
The important steps are to
have text-align: center in the parent div
define a width for the parent div
define the child-div's width as 100% (thereby spreading to parent-div's width)
provide two values for child-div's padding. The first one (40px) makes sure there is some visible vertical space in the div, the second one (0px) makes it fill out the parent div horizontally.
I'm working on a site which needs an image centered in the div on the left side, centered off the right div with a background.
I tried to a common solution, but for some reason, it won't work. It must be responsive as well, so I'm a bit in the dark over here. See my fiddle for the example.
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
https://jsfiddle.net/Onno0297/grvwxby2/1/
If I understand your question correctly then below code will work.
Visit https://jsfiddle.net/alishapatel/n3ap1vjo/4/!
.leftSide {
height: 100%;
display: flex;
align-items: center;
}
.rightSide {
background: #313131;
height: 546px;
color: #fff;
}
.rightSide h3 {
text-align: center;
padding-top: 200px;
}
.rightSide p {
text-align: center;
}
.btn.btn-primary {
margin: 0 auto;
display: block;
}
.imgLeft {
max-height: 400px;
max-width: 300px;
margin: 0 auto;
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6">
<div class="leftSide">
<img src="https://images.pexels.com/photos/3755760/pexels-photo-3755760.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-fluid imgLeft">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="rightSide">
<h3>
Some text
</h3>
<p>
Some more text
</p>
<button type="button" class="btn btn-primary">Some text</button>
</div>
</div>
</div>
</div>
I have a working example website from the bootstrap template website and was analysing the code to understand how they created it. Namely how they centered the text on the first page located here. The code for that snipplet is,
<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
<div class="container m-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
...
</div>
<div class="col-lg-8 mx-auto">
...
</div>
</div>
</div>
</header>
So then I noticed that the m-auto was doing the centering. However, when I attempt to create it from scratch for myself and create this basic code,
<style>
#frontpage {
height: 100vh;
width: 100vw;
}
</style>
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
It doesn't center at all.
What am I forgetting here?
I would suspect that the container gets centered inside it's parent, which takes up the page.
you have copied the code but styles not included for them if guess correctly. anyway, I have corrected please try this one.
<style>
#frontpage {
height: 100vh;
width: 100%;
}
.center-me{
margin: auto;
width: 60%;
text-align: center;
}
</style>
<section id="frontpage">
<div class="center-me">
<div >
<h1> YOU CAN DO IT </h1>
</div>
<div >
<h1> I should be centered </h1>
</div>
</div>
</section>
Is this what you're after?
Version 1
https://codepen.io/panchroma/pen/YdEWZJ
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
border:1px solid grey;
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
Version 2
This also centers the text vertically
https://codepen.io/panchroma/pen/KbygzX
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row vert-align">
<div class="col-8">
<h1>YOU CAN DO IT</h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
.row.vert-align{
position: absolute;
top: 50%;
left:50%;
-ms-transform: translateY(-50%);
transform: translate(-50%, -50%);
}
I'm using Bootstrap 3.
I need to center a text (h2) in a div with a background. I need that his background not 100% width.
I cannot center them in their column(s) (see screenshot of wrong behavoiur).
This is HTML:
<div class="col-sm-6">
<div class="category-title">
<h2>{{ #value->category }}</h2>
</div>
</div>
And this is the CSS:
div.category-title{display:inline-block;
background-color:#E1001A;
padding:10px;
text-align:center;
margin:0 auto}
div.category-title > h2{color:#FFF;
text-align:center;
text-transform:uppercase;
font-size:200%;}
Thank you
Add class text-center to the parent element of category-title
div.category-title {
display: inline-block;
background-color: #E1001A;
padding: 10px;
margin: 0 auto
}
div.category-title > h2 {
color: #FFF;
text-transform: uppercase;
font-size: 200%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>Offerte Pala</h2>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>Offerte Pala</h2>
</div>
</div>
</div>
Try class="text-center" from official Bootstrap site. http://getbootstrap.com/css/
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
Try text-center in div class. Something like following.
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>{{ #value->category }}</h2>
</div>
I'm trying to align a row of buttons on the bottom but also have two rows of text at the top both justified left using twitter bootstrap. Here is what I'm trying to achieve:
Here is a jsfiddle of my recent attempt:
My current css files look like this:
.profile-avatar {
position:relative;
height:170px;
}
.profile-avatar img {
height: 160px;
width: 160px;
margin-left: 20px;
}
.profile-buttons {
margin-left: 15px;
margin-top: 110px;
}
I'm completely lost on how to add two rows of text to the top right of the image above the three buttons.
Any thoughts?
Thanks,
-Paul
http://jsfiddle.net/kks6h0bc/7/
.text-0,.text-1{
position: absolute;
top: 0px;
left: 200px;
display:block;
}
.text-0{
top: 0px;
font-size:30px;
}
.text-1 {
top: 50px;
}
Try with position: absolute; (watch fiddle)
Check this Fiddle. I Hope it helps.
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="profile-avatar">
<div class="row">
<div class="col-xs-12">
<img src="http://www.kanorika.com/friendly/demo/data/avatars/min4/SyWH14RnFCt.jpg" class="profile-img img-responsive"/>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
Large Text<br>Small Text
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
</div>
</div>
</div>
</div>
</div>
</div>