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>
Related
So, I have to create this Page where in you get text alongside image displayed as seen in here
But , on minimising the window size the image gets overlapped as seen here
<div class="header1">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
</div>
</div>
and Here is the css
.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt;
font-size: 13px;
font-weight: 750;
float: left;
}
.header1 {
border: 1px solid black;
height: 150px;
}
.img1 {
width: auto;
height: 130px;
padding :10px;
}
Also, using bootstrap 3 . All i want is that the image goes side by side the text on minimising the window size .
First you have forgot to add the .row class div which bootstrap requires to wrap around the columns to work correctly.
I removed .pull-right and instead just added text-right to the column. You can also use floats though or whatever to set the image to the right side however you wish.
<div class="header1 row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 text-right">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="img1">
</div>
</div>
You have to wrap col in row
Remove the .hedtext - float (bootstrap worry about float)
Remove .header1 height: 130px; (It the reason image out of border)
See working code
.hedtext {
line-height: 2pt;
font-size: 13px;
font-weight: 750;
}
.row {
border: 1px solid black;
}
.img1 {
width: auto;
height: 130px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
<h4 class="hedtext">Address</h4>
<h4 class="hedtext">Contact Number</h4>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
</div>
</div>
</div>
you have to add responsive class in div like col-xs-* for responsive
do this for your solution
<div clss="row">
<div class="header1">
<div class="col-md-8 col-xs-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4 col-xs-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
class="pull-right img1">
</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%);
}
The title might be misleading, but I didn't know how else to name it.
In any case, I need to have an div/image inlined with a text, and a button beneath that text. The issue is, I can't really make the button take the full width without adding any padding, no matter what I try.
To make my explanation clearer, here's an image of what I'm trying to make:
And I'm trying to use Bootstrap 4 utilities only.
This is my code so far:
.col-md-3 {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
}
.btn {
background-color: #292a2c;
color: #ededed;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
How can I make this work? Also, the div with a class .img is a placeholder in a way, and needs to stay like that.
Thank you!
You can achieve this by using bootstrap media object with no additional css. Please see code snippet below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="media">
<img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<button class="btn btn-primary btn-block">Button</button>
</div>
</div>
</div>
</div>
</div>
You can try something like this, then style it accordingly:
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A">
</div>
<div class="col-8">
<div class="row">
<p>text</p>
</div>
<div class="row">
<button>button</button>
</div>
</div>
</div>
</div>
Here is the code for getting as shown in the image
'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div>
<div class="col-md-6"><div class="row">
<h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>
For style use the style in your question
You could do something like this.
Note that Bootstrap by default does not have a black background class so you would have to create one.
.bg-black {
background-color: #000 !important;
border: 2px solid #000 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid"> <!-- Make it full width -->
<div class="row d-flex"> <!-- display flex -->
<div class="col-4 align-self-stretch"> <!-- stretch the column -->
<img class="w-100" src="http://placehold.it/200x200" />
</div>
<div class="col-8 align-self-stretch"> <!-- stretch the column -->
<p>Some Text Here.<br/> Can be long or short</p>
<p>Yet another paragraph</p>
<p>And one more paragraph</p>
<button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
.col-md-3 {
background-color: #ededed;
width:100% !important;
}
.col-md-3> div{
display:inline-block;
float:left;
width: 60%;
height:100%;
}
.img {
width: 15% !important;;
height: 88px !important;
background-color: #292a2c;
display:inline-block;
}
.btn {
width: 60%;
background-color: #292a2c;
color: #ededed;
height:50%;
display:inline-block;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
Everything looks good just make sure that you have bootstrap.css file in right place and make sure that its working.
I made some changes to your code, its a bit hard coded but u must take care to overwrite bootstrap classes and don't change them directly.
.box {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
float: left;
margin-right: 5px;
}
.text {
float: left;
}
.btn {
background-color: #292a2c;
color: #ededed;
margin-top: 33px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 d-flex p-0">
<div class="box">
<div class="img"></div>
<div class="text">
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
</div>
I want to center 4 extra small bootstrap columns next to each other.
But when I do that it just doesn't center them.
I tried to center them with the margin: 0 auto; method but that didn't work.
I also tried text-align: center; but that also didn't work.
And also the built in center-text class in bootstrap.
I tried all of these methods on all the parent divs.
This is what it is right now:
And this is what I want:
This is my code right now:
<div class="gallery-filter">
<div class="row">
<div class="col-xs-2">
<p>
All
</p>
</div>
<div class="col-xs-2">
<p>
Area
</p>
</div>
<div class="col-xs-2">
<p>
Resort
</p>
</div>
<div class="col-xs-2">
<p>
Rinjani
</p>
</div>
</div>
</div>
.gallery-filter > .row {
margin-right: 0px !important;
}
.gallery-filter {
width: 100%;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
}
Try bootstrap text-center class:
<div class="col-xs-3 text-center">
<p>
All
</p>
</div>
<div class="col-xs-3 text-center">
<p>
Area
</p>
</div>
<div class="col-xs-3 text-center">
<p>
Resort
</p>
</div>
<div class="col-xs-3 text-center">
<p>
Rinjani
</p>
</div>
If still doen't work try to remove p tag
http://codepen.io/anon/pen/BLkoNA
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 */
}