This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 20 days ago.
Does anyone know how to center my container to be center. I try to align my code to be center but it doesn't apply the code. I try to change it but it doesnt work. Do I miss something? It show like this.
I want it to be center but it doesnt work. Here is my html code.
<div class="row">
<div class="col-md-8" style="margin-top: 30px;">
<div class="card" style="font-size: 100px; text-align: center; height: 100px;">
<div class="card-body">
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12">
Update:
I edited your code to a static html to test it out.
I can see that your code is working, but you can try to add text-align: center; in order to make everything in the container centered.
Below is the full code, and you can test it here too: https://codesandbox.io/s/festive-hopper-73v528?file=/index.html
and here's a live preview: https://73v528.csb.app/
<div
class="container"
style="margin-top: 50px; margin-bottom: 50px; text-align: center;"
>
<div class="row">
<div class="col-md-4">
<h1>My Uploads</h1>
</div>
<div class="col-md-4">
<a
href="javascript:void(0);"
class="btn btn-primary"
onclick="selectFileForUpload();"
>Upload</a
>
</div>
</div>
<div class="row">
<div class="col-md-8" style="margin-top: 30px;">
<div
class="card"
style="font-size: 100px; text-align: center; height: 100px;"
>
<div class="card-body"></div>
<div class="card-footer">
<div class="row">
<div class="col-md-12">
<p>chap5</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have applied text-center property on body, but according to screenshot data is on footer
<div class="card" style="font-size: 100px; text-align: center; height: 100px;">
<div class="card-body">
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12">
instead apply style on <div class="card"> check the snippet above
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
I'm generating cards in my *ngFor div.
It is generating them vertically (down), but I want angular to generate them horizontally (right).
My idea was to put the class col-6, but that doesn't work, it just puts half of the card under each other.
This is the code:
<div class="card-body">
<div class="card" *ngFor="let BLA of PACKAGE.blas; let index=index" class="p-1">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
This is what I have:
And I want this:
I tried adding col-6 to the classes but it doesn't respond.
How can I achieve this effect ?
That has nothing to do with Angular, use a display: flex on the card-body and set flex-wrap: wrap; and flex-direction: row;:
.card-data {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card {
width: 40%;
height: 100px;
line-height: 100px;
background-color: grey;
margin: 10px;
color: white;
text-align: center;
vertical-align: middle;
}
<div class="card-data">
<div class="card">
card 1
</div>
<div class="card">
card 2
</div>
<div class="card">
card 3
</div>
</div>
Change parent div class to row and add class col-6 to card row where your loop running
<div class="row">
<div class="card col-6 p-1" *ngFor="let BLA of PACKAGE.blas; let index=index">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
You also have extra card div under loop, remove that for clean design.
I am trying to build a bootstrap calculator using the grind system provided by Bootstrap. I have two rows using the class col-md-4 with each row comprising of 4 buttons. I would expect to see the buttons expand the entire width of the div tag. When I put a background color to the div tag the color fills the entire div tag, as I would except. I created a codepen to illustrate my problem.
<div class="container">
<div class="cal-body">
<div class="header">
</div>
<div class="lcd">
</div>
<div class="row">
<div class="col-md-4">
<button>7</button>
<button>8</button>
<button>9</button>
<button>%</button>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-bottom: 20px;">
<button>4</button>
<button>5</button>
<button>6</button>
<button>X</button>
</div>
</div>
</div>
</div>
</div>
In other words, I would like my buttons to take of the full length of the column row. As of now, it only takes 1/4 of the column space. I am trying to replicate the look of a calculator.
My code pen:http://codepen.io/louis345/pen/KNoypX
Any help will be greatly appreciated.
Just change the col-md-4 to col-md-12 if you want to span the whole row.
You can also add class text-center into your columns to make buttons centered position.
Sample:
<div class="col-md-12 text-center">
</div
Check this to see if that's what you are looking for
The idea is to wrap each button on a different column
<div class="col col-sm-3">
<button>7</button>
</div>
#claudios your answer is right [ use class (text-center) ] and I am just implement in this snippet.
.line{
box-shadow:inset 0px 0px 2px #ccc;
padding-top: 10px;
padding-bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center line">
<button class="btn btn-success">Submit</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</div>
Each row has 12 columns, you're setting a div to use 4 columns and it will make the div to use 1/3 of the size.
Also, col-md must be used to sizes >= 768px. You should use col-xs because you're limiting the size of cal-body.
I made it, based on your codepen: http://codepen.io/anon/pen/BQMeXQ
Take a look here, 2 rows, each one has 4 divs, each using 3 columns.
<style>
.button-group {
width: 100%;
margin-left: 15px;
}
.button-line {
width: 100%;
}
.button-col {
padding-left: 0px;
padding-right: 0px;
}
.button-col button{
width: 100%;
}
</style>
<div class="button-group">
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>7</button>
</div>
<div class="col-xs-3 button-col">
<button>8</button>
</div>
<div class="col-xs-3 button-col">
<button>9</button>
</div>
<div class="col-xs-3 button-col">
<button>%</button>
</div>
</div>
<div class="row button-line">
<div class="col-xs-3 button-col">
<button>4</button>
</div>
<div class="col-xs-3 button-col">
<button>5</button>
</div>
<div class="col-xs-3 button-col">
<button>6</button>
</div>
<div class="col-xs-3 button-col">
<button>x</button>
</div>
</div>
</div>
My CSS isn't picking up my different columns. They are stacked on top of each other. I want each of them each to span 4 columns of the same row.
<div class="container">
<div class="row">
<div class="col-md-4" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
How about this using floats. You can apply the float which is the pull-left helper class to the div.col-md-4 and then they won't stack upon each other.
Updated JS fiddle but you shouldn't need to float left in the CSS, couldn't get JS fiddle to pull bootstrap stuff. http://jsfiddle.net/4xEPr/7/
<div class="container">
<div class="row">
<div class="col-md-4 pull-left" id="directionsPanel1">
<h3 class="directions-discription" id="directions-info1"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel2">
<h3 class="directions-discription" id="directions-info2"></h3>
</div>
<div class="col-md-4 pull-left" id="directionsPanel3">
<h3 class="directions-discription" id="directions-info3"></h3>
</div>
AND CSS
div.col-md-4 {
border: 1px solid #333;
width: 200px;
background-color: red;;
}