Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)
I have tried box-sizing: border-box but it had no effect.
My HTML code:
.container-fluid {
padding: 0;
}
.carousel-inner .carousel-item h1 {
font-weight: bold;
font-size: 300%;
/*-webkit-text-stroke:1px black;*/
font-family: 'Open Sans', sans-serif;
/*text-align:right;*/
}
.carousel-inner .carousel-item img {
filter: brightness(50%);
}
#paddingrow {
padding: 25px;
}
#paddingrowLarge {
padding: 100px;
}
#accordionRightalign {
float: right;
}
#mycard {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Bootstrap rows have margin-right: -15px; margin-left: -15px; that's why the right edge doesn't lined up. Try to add mx-0 = margin-left:0 and margin-right: 0, a bootstrap class. In your nested row form.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row mx-0">
<div class="col pl-0 pr-3">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Make sure col in the container with margin and padding to zero.
Put your image into container with the width not greather than 100%.
I noticed my button wasn't in the column div, so I made two column div's, one size 10 and one size 2, put input in the first, put the button in the second, and it seems to work now.
Here is the fixed code:
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form">
<div class="row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary w-100" type="submit">Subscribe now!</button>
</div>
</div>
</form>
</div>
</div>
</div>
I have a HTML which has a div with multiple inputs(with placeholder). For some reason the placeholder is not displayed properly.Also, need the 2 input button(text) to be placed next to each other.
Here is the jsfiddle.
http://jsfiddle.net/o2qt6910/
HTML
<div class="container">
<div class="row row-bordered voffset4">
<div class="col-md-12">
<label class="radio-inline"><input type="radio" name="optradio">Aisles</label>
<label class="radio-inline"><input type="radio" name="optradio">Poses</label>
<label class="radio-inline"><input type="radio" name="optradio">Exclusion Zones</label>
</div>
</div>
<div class="row row-bordered">
<div class="col-md-4">
<button type="button" class="btn" id="add-aisle">Add</button>
<div id="aisle-coordinate-container">
<div class="col-md-1"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>
<div class="col-md-1"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
<!--<div class="row">-->
<!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
<!--</div>-->
</div>
CSS
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
.row-bordered:after {
content: "";
display: block;
border-bottom: 5px solid #ccc;
margin: 0 25px;
}
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
Try this:
<div class="row row-bordered">
<div class="col-md-4">
<div class="col-xs-12">
<button type="button" class="btn col-xs-2" id="add-aisle">Add</button>
</div>
<div id="aisle-coordinate-container">
<div class="col-sm-6">
<input type="text" class="form-control" id="inputKey" placeholder="X">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
There is some issue in Fiddle in alignments. I've tested this in my browser, input elements are now in one line with placeholders visible properly.
<div class="row row-bordered">
<div class="col-md-4">
<button type="button" class="btn" id="add-aisle">Add</button>
</div>
</div>
<div class="row">
<div id="coordinate-container">
<div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>
<div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
Is this how you want it to be? I'm having a hard time visualising what is it that you want.
Do you want the add button and the inputs on the same line or next?
Edit: Changed the button to be on another row. There is no need for it to be on the same row, if you want it on another line.
Its not an issue with the code but more how you are using the bootstrap grid. Your parent container has col-md-4 but the div with the input boxes have col-md-1 which only 1/4th of the width to be shown so its squished down. If you remove the col-md-1 classes it shows up correctly.
Quick suggestion: If you want to use a col-md-x class you can add row class to the <div id="coordinate-container">
I'm designing a page using materialize css. I have a row with two columns with ids "left-panel" and "right-panel" inside it. Left column will display a list of users where as in right column message from input field will be displayed.
My problem is that when the number of messages is more, the height of left and right columns do not increase together. Please help me out.
HTML:
<div id="main-row" class="row">
<div id="left-panel" class="col s12 m2 hide-on-small-only grey lighten-3">
<h5 class="center-align">Chatters</h5>
<div class="divider"></div>
</div>
<div id="right-panel" class="col s12 m10">
<div class="section">
<h4>Welcome to ChatSpace</h4>
<ul id="messages"></ul>
</div>
<div class="divider"></div>
<div class="section">
<form id="message-form">
<div class="input-field col s12 m12 l10">
<input id="message" name="message" type="text" autofocus autocomplete="off"/>
<label for="input_text">Type your message...</label>
</div>
<div class="input-field col s12 m12 l2">
<button class="green waves-effect waves-light btn">
<i class="material-icons right">message</i>Send</button>
</div>
</form>
</div>
</div>
</div>
CSS:
body {
overflow: auto;
margin: 0 auto;
padding: 0 auto;
}
#left-panel {
min-height: 100vh !important;
}
just use a display flex on your main row and happy coding
#main-row { display: flex; }
I'm using bootstrap. I want the text labels for the inputs to be aligned left of the text boxes edge, not above in the center as they are now.
Is this something that is done with bootstrap?
EDIT: Sorry the code snippet did not show my problem properly so i redid it in jsFiddle.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center col-xs-12 ">
<div class="row">
</div>
<div class="row ">
<div class="col-xs-6 ">
<label for="companyInput">LABEL</label>
<br />
<input id="companyInput" type="text">
</div>
<div class="col-xs-6 ">
LABEL
<br />
<input id="cardInput" type="text" />
</div>
</div>
</div>
EDIT:
I updated your fiddle, here - https://jsfiddle.net/Lfmxt3kv/1/
If you have to have text-center on the parent container, then you'll need a wrapper div around your label and input element. Here are the changes I made to the fiddle:
<div class="text-center col-xs-12">
<div class="row ">
<div class="col-xs-6 ">
<!-- .input-wrapper needs to be wrapped around both the label and input element -->
<div class="input-wrapper">
<label for="companyInput">LABEL</label>
<input id="companyInput" type="text">
</div>
</div>
<div class="col-xs-6 ">
<div class="input-wrapper">
<label for="cardInput">LABEL</label>
<input id="cardInput" type="text" />
</div>
</div>
</div>
</div>
.input-wrapper {
display: inline-block;
text-align: left;
}
.input-wrapper label {
display: block;
}
Just adding text-left looks like it works.
<div class="col-sm-6 text-left">
LABEL ONE
<br />
<input id="companyInput" type="text" placeholder="Företag... (1-100)">
</div>
you are looking for Bootstrap forms
Individual form controls automatically receive some global styling.
All textual <input>, <textarea>, and <select> elements with
.form-control are set to width: 100%; by default. Wrap labels and
controls in .form-group for optimum spacing.
For what you want, you need to display:inline-block the .form-group and add class text-left to align left because .container has text-center
Snippet
.form-group {
display: inline-block
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center container">
<div class="row">
<div class="col-xs-12">
<form class="form">
<div class="form-group text-left">
<label for="companyInput">Company</label>
<input class="form-control" id="companyInput" type="text" placeholder="Företag... (1-100)">
</div>
<div class="form-group text-left">
<label for="cardInput">Card</label>
<input class="form-control" id="cardInput" type="text" placeholder="Kort... (1-100)" />
</div>
</form>
</div>
</div>
</div>
for a quick fix you could add a class to the div..
<div class="textalign col-span-6">
then in css just do
.textalign { text-align: left; }
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