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
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 am trying to vertically center my header elements, but the following code that I've tried isnt working. What am I doing wrong? Please let me know where I can add padding or something else.
Here is the website: https://eagleroofingcontractor.com/
What I have so far:
<div class="col-md-12">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-md-4">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>631-209-7377</h3>
<span>info#eagleroofingcontractor.com</span>
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Better-Business-Bureau-A-Logo.png">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/gaf-master-elite-gold800px-800x292.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/Google_Partners_logo_blogpage.jpg">
</div>
</div>
<div class="col-md-2">
<div>
<img src="https://eagleroofingcontractor.com/wp-content/uploads/2019/02/googole-guaranteed-min.png">
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
You need to change the elements .textwidget, .extra-info and the col-md-2 columns inside .extra-info to flex items and then vertically center the columns using the css flex property align-items:center.
Add the following to your CSS:
.textwidget {
display: flex;
}
.extra-info {
display: flex;
}
.extra-info .col-md-2 {
display: flex;
align-items: center;
}
N.B. Your site has a lot of elements using a common ID (e.g. all your <aside> elements in your header uses the same #text-3 ID).
You should not use the same ID for more than one elements. Replace them with a common class-name or use a different ID for each element instead.
I'm working on making front end design for someone but I don't have access to the css file or classes, so I can't see what's causing the container align left.
I'm looking to center the container on screen. What would be best approach? I tried wrapping div with text-align: center !important; that didn't work.
<div class="portlet-content">
<div class="portlet-content-container">
<div class="portlet-body">
<div>
<div class="container">
<div class="biography-view">
<div class="biography-item col-md-6">
<div style="border-style:none">
<div class="biographyimage" style="background-image:url(http://www.math.uni-frankfurt.de/~person/_4170854.jpg);"> </div>
<div class="caption biography-profile">
<div class="biography-profile-content">
<h3 class="full-name">Name</h3>
<p class="person-title">Company Name</p>
<p class="person-title"><strong>Person Title</strong></p>
<div class="person-biography">Biography</div>
<div class="person-biography collapse" id="readmore">More Person Info</div>
<a class="read_more" data-target="#readmore" data-toggle="collapse">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a CSS block for the container, you can center it as follows:
margin-left: auto;
margin-right: auto;
Use inline styles <div class="portlet-content" style="text-align:center;"> or somthing yours based on css specificity mozila MDN
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
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>