<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I don't know if this is a current issue with Materialize CSS itself.
My goal is to properly format the card so that it has 6 columns for medium display. However, the card, when resized to small width, behaves in a erratic manner (the content is aligned to the left, and the space on the right is left empty).
The cause of the "issue" (I would say it is by-design) is the combination of float: left; and margin-left: auto; with no margin-right: auto; rules applied for columns with .col.m* classes. Because of this, columns are always snapped to the left of the containing row.
If you want to override this to center your column, you need to specify an offset. What Materialize CSS Grid (implemented with float) expects you to do is to express that the column taking ½ of the containing row width should be offset by 6 divided by 2 columns on both sides (aka "centered").
Offsets in Materialize CSS are provided with the offset-* set of classes. In your case, you only need the offset-m* and offset-l* subsets. Let's take a look:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10 offset-m3 offset-l2">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Im trying to center the header and input field with bootstrap. I cant get the input field to center with the header. If anyone has a better way of doing this let me know.
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
you have incomplete HTML and no CSS. But based on what you have, a simple margin: auto; in CSS should center the element for you.
If you want more control you should look into flexbox. post more code and you'll get more help.
EDIT: thanks for the code: this works to center the input. I just verified it. let me know if you need any more help. cheers
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="display-4 text-center">Weight Converter</h1>
<form>
<div class="form-group" id="centerParent">
<input
id="lbsInput"
type="number"
class="form-control form-control-lg"
placeholder="Enter Weight..."
/>
</div>
</form>
<div id="output">
<div class="card">
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#centerParent {
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
I'm trying to use flexbox to align vertically a section.
So this is what I'm trying to align vertically:
HTML:
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Regarding CSS, I've only applied this:
.hm-hero {
background: url("../img/main_pic.png") no-repeat;
background-size: fill;
min-height: 600px;
}
I can't figure out why flexbox is not working. I've tried two classes, align-content/items-center in whatever div possible and still can't get it to work.
So since I have that full width div with the background image, inside it is a container div, which I'm trying to get it to stay vertically. I really want to avoid putting a 200px margin top to this. Is this is a Bootstrap 4 bug?
I added the align-items-center class to the flex div parent and it worked. As long as you have a height on the .hm-hero the content will be centered. Hope this helps. JSFiddle
.hm-hero {
background: url("https://placehold.it/960x600") no-repeat;
background-size: fill;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
I'm working on https://rapptor.co . I have used Materialize as the framework and I'm making a login modal, I'm trying to center the buttons at the bottom of the modal with center-align, however It's not working.
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Login Details</h4>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">person</i>
<input id="first_name" type="text" class="validate">
<label for="first_name">Username/Email</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">security</i>
<input id="first_name" type="password" class="validate">
<label for="first_name">Password</label>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row" style="margin-bottom: -30px;">
<div class="col m4 s12">
Close
</div>
<div class="col m4 s12">
Help
</div>
<div class="col m4 s12">
Login
</div>
</div>
</div>
</div>
Can anyone suggest anything for me to try?
Thanks!
remove float:right; and insert try following css at line no:13
.row .col.m4 {
width: 33.3333333333%;
margin-left: auto;
left: auto;
right: auto;
text-align: center;
}
change your modal footer like this way, just run this snippet you can see the difference, hope this will help you
.modal-footer {
text-align:center;
}
.modal-footer a {
display:inline-block;
margin:0 15px;
float:none; /*if you set float already */
}
<div class="modal-footer">
Close
Help
Login
</div>
if you set this you button show like this picture
i dont know this is what you need , thats why i put an image here
I am having a very minor issue but i have been trying to fix it for few hours with no luck at all. I have a simple page that uses bootstrap. Following is the screenshot.
In this screenshot, I had my browser window maximized. As you can see the search bar is centered well and the names of 3 favorite players in the bottom are not. Now when i make the browser window size half of it. This is what i see.
Now the search bar no longer is center and the names of favorite players are centered. This is definitely not responsive as it should be.
Problem
I have identified two issues. One is that the search bar is somehow not releative and the names of the players are not. So I tried various css by making its div to absolute and relative and messed around with padding but no luck.
I am sure i am missing something here and this might be a stupid question but it would help me because i have been stuck on this for long while now.
I have uploaded my code on BOOTPLY
Following is my HTML code:
<div class="container-fluid">
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
<!-- <div class="row">
--> <div class="col-lg-4">
<div class="searchPage-box text-left">
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
<!-- </div> -->
</div>
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title" class="row">FAVORITES</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<!-- this favorites are hard-coded for now for purposes of demo -->
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
</div>
</div>
</div>
I highly appreciate all suggestions and approaches.
do not copy, learn how it works by looking at this example
This absolute not the correct way but give you a small idea!
Any questions ?? comment away! :)
#searchPage-small-title {
color: rgba(128, 128, 128, 1);
font-size: 16px;
font-family: "Open Sans";
text-align: center;
font-weight: 700;
}
#searchPage-title {
color: rgba(128, 128, 128, 1);
font-size: 50px;
font-family: "Open Sans";
text-align: center;
}
.searchPage-box {
text-align: center;
}
.searchPage-input {
width: 80%;
border-style: solid;
border-radius: 6px;
border-color: rgba(192, 189, 178, 1);
height: 59px;
font-size: 18px;
text-indent: 32px;
}
.fa-star {
color: rgba(220, 118, 28, 1);
}
#searchPage-favorites-title {
color: rgba(128, 128, 128, 1);
font-size: 18px;
font-family: "Open Sans";
text-align: center;
font-weight: 400;
margin-top: 40px;
margin-bottom: 30px;
}
.searchPage-favorites-item {
color: rgba(128, 128, 128, 1);
font-size: 20px;
font-family: "Open Sans";
display: inline-block;
text-align: center;
font-weight: 800;
padding-top: 30px;
height: 115px;
width: 140px;
border: 1px solid #444;
margin: auto 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<!--row I-->
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-small-title">NBA</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!--row II-->
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!-- row III -->
<div class="row" style="background-color: #eeede7; padding-bottom:100px;">
<div class="col-lg-12">
<div class="searchPage-box">
<form role="form" class="form" ng-submit="submit()">
<div class="form-group">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
</form>
</div>
</div>
</div>
<!-- row IV -->
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title">FAVORITES</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!-- row V -->
<div class="row" style="background-color: #eeede7; padding-bottom:100px; text-align: center;">
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Jordan</i>
</div>
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Lebron</i>
</div>
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Curry</i>
</div>
</div>
</div>
Edit:
The following div have the class col-lg-4 meaning the width if the available space will be 33,333333%. Also the first child of this div has text-left class. If you adjust col-lg-4 to col-lg-12 and the first child with text-left to text-center you will have the desire result.
Edit:
and alter the next css:
.searchPage-box {
/* padding-left: 590px; remove */
width: 100%;
margin-bottom: 60px;
border-radius: 0 0 0 0;
}
(from http://www.bootply.com/zYFA6mqMO1)
<div class="col-lg-4">
<div class="searchPage-box text-left">
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
Not at my computer now, so I will have to answer more fully in a bit, but one thing that jumps out to me: instead of having empty divs with bootstrap columns, use offsets; for example, col-lg-offset-1.
EDIT: Expanding my answer.
Here is a link to my forked version of your Bootply, showing my changes. The following is a small portion of the bootply:
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
Yuri's answer does a pretty good job of explaining the issues you're coming up against. If you're going to use Bootstrap, in general, you need to only use Bootstrap's layout classes to set your layout - adding custom positions and other things like that can really mess with the page, as you've seen.
I won't go into a detailed explanation of the changes I made, in the hopes that you can have a look and figure out what makes it work, but I do have some notes:
First, rather than lg, it's better to define at least an xs behavior, and work your way up to bigger screens. By only defining col-lg-x classes for most of your items, you're not defining a responsive layout for viewports below that size.
Second, there were a couple places where you had row classes nested directly inside other row classes. This can also cause issues. The intended method of use is
<div class="row">
<div class="col-xs-x">
<!-- if you need to define another grid inside the above div,
start another row -->
<div class="row">
</div>
</div>
</div>
Third, as I mentioned in my initial response, rather than adding empty divs with column classes (which will be collapsed automatically), use col-{size}-offset-x classes on the first div in the row (in addition to the regular col-{size}-x class). Also, related to alignment: rather than using text-align: center, you can just add bootstrap's text-center class to what you want to center.
The only issue in my version is that the favorites box overlap on a small screen - this is because of their defined size. I'll leave that to you to fix.
I hope this answer helped you, and please let me know if you have any questions about my answer.
Heres what you should note:
.searchPage-box {padding-left: 590px}
Using padding-left and setting pixels is a bad idea, because when the screen size does change, pixels don't auto change. So if you want to center it, try this:
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 30% !important;
Those go under
.searchPage-box
Hope I helped :)
Your div around the search bar this one:
uses your css class searchPage-box, that one is using padding left 590px
.searchPage-box {
padding-left: 590px;
width: 100%;
margin-bottom: 60px;
border-radius: 0 0 0 0;
}
This cause 590px to the left of the search bar to be unused.
<div class="container-fluid">
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="row">
<div class="col-lg-10 col-lg-push-1">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
<!-- change in code is here -->
**<div class="row">
<div class="col-lg-6 col-md-6 col-sm-4 col-md-offset-2 col-lg-offset-3 col-sm-offset-1 text-left">**
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
<!-- </div> -->
</div>
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title" class="row">FAVORITES</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<!-- this favorites are hard-coded for now for purposes of demo -->
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
</div>
</div>
</div>
You are using col-sm-2 on the footer div but you lose responsive behaviour when you set width:140px in .searchPage-favorites-item.
Remove that rule and .col-sm-4 and use .col-sm-offset-3 instead:
<div class="col-sm-2 col-sm-offset-3 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
or better
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-sm-2 col-sm-offset-3 searchPage-favorites-item"><i class="fa fa-star"></i> Jordan</div>
<div class="col-sm-2 searchPage-favorites-item"><i class="fa fa-star"></i> Lebron</div>
<div class="col-sm-2 searchPage-favorites-item"><i class="fa fa-star"></i> Curry</div>
</div>
</div>
</div>
For what concerns your form, if you want to have it centered and you have 1 column at end row, you have to have one at the beginning too (or you set offset-1)
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName" type="text">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
Or just use .col-lg-12 on it
Remember: with bootstrap you rarely have to deal with layout positioning in your custom css, since you can obtain a lot just using its classes. You should just style colors, shadows, text and things like these