https://jsfiddle.net/pqrbm0o0/
Currently, name/phone #/message/email is on the left side of the box
how can i align it on the top left (not the top center)?
<div class="col-sm-6">
<h4><strong>Your Contact Information</strong></h4>
<span style="color:#cc0000; margin-left:25px">• </span>Required fields.<br/>
<br/>
<div class="contact">
<div class="block">
<label>Name:</label>
<input type="Name" style="width:250px;" />
<span style="color:#cc0000;">• </span> </div>
<div class="block">
<label>Phone Number:</label>
<input type="phone" style="width:250px;"/>
<span style="color:#cc0000;">• </span> </div>
<div class="block">
<label>Email:</label>
<input type="email" style="width:250px;"/>
<span style="color:#cc0000;">• </span> </div>
<div class="block">
<label>Message:</label>
<textarea name="Message" id="Message" style="width:350px;"></textarea>
<span style="color:#cc0000;">• </span>
</div>
</div>
In your CSS, apply the following styles:
.block label { display: block;
text-align: left;
}
This will allow it to be on its own line rather than inline and setting text align left should be fairly straightforward.
In case you don't know the difference between inline-block and block:
https://css-tricks.com/almanac/properties/d/display/
Related
I have a form, in that n number of form fields available. only For 2 inputs, I want to share a common button without affecting remaining layout, but it's not aligned properly as common.
Here is what I tried. First two input fields should have common button
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
I assume that you want to center the button for two input elements. Is that so you can try display:table for the .row this might have fix your issue.
.row {
display: table;
width: 100%;
}
.row .col{
display: table-cell;
}
.col1 {
width: 40%;
}
.col2 {
position: relative;
vertical-align: top;
}
.col2 button {
position: absolute;
top: 30px;
left: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
<div class="col col1">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col col2">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
</div>
</body>
</html>
However if you want to increase the size for the button you can always add padding or set height for the button.
Codepen link
Pure bootstrap 4 impementation wll be the one below.
You have to group the two inputs into one single .col and the button to an another .col with flex-grow-0 flex-shrink-1 mb-3 d-flex to shrink the container to the minimum of button width and to have sufficient margin at bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
<button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
</div>
col-auto in bootrap 4.0.0 does not have padding. And there may be some other bugs too. You should better use the latest version of bootstrap 4. it is version 4.6.0
Use two .row. The first .row for the first two inputs and the button and the second .row for the rest of the inputs.
Use .col-auto and .d-flex for the column that contains the button to make it take as much space at it need and full height
Use .mb-3 for the button since the .form-group has that much margin-bottom.
You may use .btn-outline-secondary instead of .btn-secondary
<div class="col-auto d-flex ">
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<div class="col-auto d-flex">
<button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
</div>
🎁
Doing so you avoid multiple nesting of .row and .col.
here is another approach, also rethinking the structure with only BS class for the styling
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col ">
<div class="form-group pt-4">
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
<button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
</div>
<div class="form-group row pl-3">
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
</div>
I am using the materializecss framework: http://materializecss.com
I want to have a login form inside the middle of the container:
I already tried setting the container div to 100% but that makes it 100% + the navbar so it will add a scrollbar. This is my html how I have it now:
<div class="container">
<router-outlet></router-outlet>
<app-login>
<div class="valign-wrapper full-height">
<div class="center-block">
<form novalidate="" class="ng-untouched ng-pristine ng-valid">
<div class="input-field">
<i class="material-icons prefix">perm_identity</i>
<input id="username" type="text">
<label for="username" class="">Gebruikersnaam</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password" type="password">
<label for="password">Wachtwoord</label>
</div>
<div class="valign-wrapper">
<button class="btn waves-effect waves-light center-block" name="login" type="submit">
Inloggen
</button>
</div>
</form>
</div>
</div>
</app-login>
</div>
I did see some answers on stackoverflow but those don't really make it responive and most of them are position: absolute which I dont want because I want it inside the container.
Give the div an ID.
Then, in style.css add:
#id {
width: 100%;
height: 100%;
}
I have the below HTML and CSS - how do I make the search-bar and add-contacts the same height? I currently have their height set to 100% in CSS to expand inside their container div but that doesn't work Is it possible to change their height even though they are bootstrap units?
HTML
<div className="container">
<form className="form-inline search-bar" role="form">
<div className="form-group has-success has-feedback">
<label className="control-label" htmlFor="inputSuccess4"></label>
<input type="text" className="form-control" id="inputSuccess4" type="text" placeholder="Search" onChange={handleChange}/>
<span className="glyphicon glyphicon-search flipped form-control-feedback"></span>
</div>
</form>
<div className="add-contacts">
<button type="button" className="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Contacts Keeper
</button>
</div>
</div>
CSS
.table-container {
margin: 20px;
}
.search-bar {
margin-left: 20px;
float: left;
height: 100%;
}
.add-contacts {
margin-right: 20px;
float: right;
height: 100%;
}
Just change the height of the search bar.
Or you could put search bar in same div as add contacts bar.
I find simpler is better with Bootstrap. I try to avoid adding custom CSS for most of the HTML elements already styled by Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<div class="col-md-3 text-left">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Search</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Search">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
</div>
</div>
</div>
<div class="col-md-6"></div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-primary">+ add stuff</button>
</div>
</form>
</div>
</div>
</div>
I have a form with two rows (col-md-6). On the left side there are some fields, on the right side, there's only one textarea.
Now what I wanted to do is make the textarea the same height as all the other fields together.
I thought this would be easily possible when setting a display: flex; to the row, so that the tow col-md-6's are the same height and then add height: 100% to the input-group, but unfortunately I was wrong. The input will not expand to the full height.
Here's my HTML code:
<div class="row" style="display: flex;">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">Input 1:</div>
<input type="text" class="form-control"></textarea>
</div>
<div class="input-group">
<div class="input-group-addon">Input 2:</div>
<input type="text" class="form-control"></textarea>
</div>
<div class="input-group">
<div class="input-group-addon">Input 3:</div>
<input type="text" class="form-control"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="input-group" style="height: 100%;">
<div class="input-group-addon">Textarea:</div>
<textarea class="form-control" style="height: 100%"></textarea>
</div>
</div>
</div>
I added the styles inline to reduce the code here on stackoverflow.
So again, I could get the two columns to the same height, but I'm unable to set the height of the textarea to 100%.
Can anyone tell how this could work? If possible without JavaScript!
textarea {
height: 100%;
}
<div class="row" style="display: flex;">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">Input 1:</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">Input 2:</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<div class="input-group-addon">Input 3:</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="input-group" style="height: 100%;">
<div class="input-group-addon">Textarea:</div>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
I am trying to have every line of text/elements centered horizontally so that my page looks lke this https://hootsuite.com/.
How do I style the page in CSS to look like that ?
Here is my page :
<div class ="wrap">
<% if user_signed_in? %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<%= render 'shared/user_info' %>
</section>
<hr/>
<br/>
<section class="stats">
<%= render 'shared/stats' %>
</section>
<section class="post_form">
<%= render 'shared/post_form' %>
</section>
</aside>
<section class="post_feed">
<br>
<h3>Post Feed</h3>
<%= render 'shared/feed' %>
</section>
</div>
</div>
<% else %>
</aside>
<div class="row">
<div class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true"></div>
<h2>Join <%= [2000, User.all.count].max %>+ artists.</h2>
<!-- <iframe src="terms" width= "100%" height= "600"></iframe>-->
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> I agree to the terms and conditions.
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Log in</button>
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</fieldset>
</form>
<button type="submit" class="btn btn-info"><i class="fa fa-facebook"></i> Login with Facebook</button>
<br/>
<br/>
<button type="submit" class="btn btn-primary"><i class="fa fa-twitter"> </i> Login with Twitter </button>
<br/>
<br/>
<button type="submit" class="btn btn-default"><i class="fa fa-linkedin"></i> Login with LinkedIn</button>
<br/>
<br/>
<button type="submit" class="btn btn-primary btn-warning"><i class="fa fa-google"></i> Login with Google </button>
<br/>
</div>
</section>
</div>
<%end%>
</div>
And my CSS:
.wrap{
display: inline-block
text_align: center ;
width:50%;
margin-left: auto ;
margin-right: auto ;
}
Not everything is centered on that page. The body text is aligned to the left. There are a couple of ways to center things.
1) adding the rule text-align: center to an element aligns to the center the child elements that don't have full width.
2) adding width: 50%; margin-left: auto; margin-right: auto aligns to the center an element that has a fixed width.
3) You can center things using flexbox. Go here to learn more abou this.
I think this should answer your questions.
body {
text-align: center;
margin-left: auto;
margin-right: auto
}
Note that elements that aren't inline, such as divs, will need to have a width defined in order for the margin: left/right styles to work.
Example:
.example-style {
width: 50%;
}
<div class="example-style">This content will be aligned in the center because all body elements are set to be centered by default.</div>
Setting elements as display: inline-block with text-align: center on the parent element will center most elements, as long as you aren't using any floats.