I am trying to design a form in arabic style. I have used a panel class. text field generally start from left side, but i want to design form from right to left.
.heading {
font-family: monospace;
font-size: 30px;
color: #0D91A5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 ">
<center>
<h2 class="heading"> Registration</h2>
</center>
</div>
<div class="container" style="margin-top:30px">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info" style="direction: rtl;">
<div class="panel-heading">
<h3 class="panel-title"><strong class="strong"> تفاصيل طالب | Executive Details</strong></h3>
</div>
<div class="panel-body">
<div class="row">
<div class=".col-sm-5 .col-md-6" style="direction: rtl;">
<div class="form-group col-md-12 ">
<div class="col-md-6 col-xs-12 col-xs-12 col-md-offset-6">
<input type="text" name="id_no" id="id_no" class="form-control" placeholder=" رقم| ID Number" tabindex="1">
</div>
<div class="col-md-6 col-xs-12 col-md-offset-0">
<input class="form-control" type="text" name="name" id="name" class="form-control" placeholder=" اسم| Name " tabindex="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
this is coding i am using class offset-6 for textfield start to right side but another textfiled with same grom starting from another line. i want box field in same line.
can anyone tell me which class i want to use? or can i change in bootsrap css file?
To design an RTL layout use Bootstrap RTL:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-rtl.css" rel="stylesheet" />
Add bootstrap-rtl.css (after bootstrap.css file) and it will override all the CSS properties that are related to rtl support.
Related
<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>
i want to make one div right align , but not able keep it in right side in row. how to make the value 172.21 at right side in the row.
screenshot
HTML:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3">
<h4>172.21</h4>
</div>
</div>
If there is text, just "align-right"
If there is block, in BS3:
Add "pull-right" to the element container
In BS4:
"float-right"
E.g. in BS4:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 float-right">
<h4>172.21</h4>
</div>
</div>
You just need add class in last column like: text-left text-md-right.
I hope below snippet will help you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container border">
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 text-left text-md-right">
<h4 class="btn btn-warning">545</h4>
</div>
</div>
</div>
Just for the text, add text-right class after col-md-3
and for the entire column, add pull-right class after col-md-3 if you're using bootstrap-3
and for bootstrap-4 add float-right instead of pull-right class.
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 can't get my form to align in the center of a div. Driving me nuts!
I simply need this contact form to be centered, no matter the viewport size.
Right now it's off to left, but I can't figure it out. I've included a codePen here
And here's my demo site
The html for the form (and parent container) is below. Any feedback whatsoever is helpful! Thank you
<section id="contact" class="contact">
<div class="container">
<div class="row mb50">
<div class="sec-title text-center mb50 wow fadeInDown animated" data-wow-duration="500ms">
<h2>Get in touch</h2>
<div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
</div>
<div class="sec-sub-title text-center wow rubberBand animated" data-wow-duration="1000ms">
<p>We welcome any question or comment you have - Expect a reply within 24 hours.</p>
</div>
<!-- Contact Form -->
<div id="contactbox">
<div id="contactholder">
<div class="col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
<div class="contact-form">
<form action="#" id="contact-form">
<div class="input-group name-email">
<div class="input-field">
<input type="text" name="name" id="name" placeholder="Name" class="form-control">
</div>
<div class="input-field">
<input type="email" name="email1" id="email1" placeholder="Email" class="form-control">
</div>
</div>
<div class="input-group">
<textarea name="message" id="message" placeholder="Message" class="form-control"></textarea>
</div>
<div class="input-group">
<input type="submit" id="form-submit" class="pull-right" value="Send message">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end contact form -->
</div>
</div>
</section>
You're mixing Bootstrap grid layout with custom stuff. That's a recipe for a headache. Always use the grid for layout and apply your margins and padding only to elements inside the innermost grid boxes in your layout.
Removing your custom widths and using Bootstrap's grid offsets as nature intended takes care of things:
<div class="col-xs-12 col-md-8 col-md-offset-2 ...
Demo
I removed all this, which only fights with Bootstrap:
#contactbox{
width:60%;
}
#contactholder{
width:1000px;
}
The width on your contactBox is fine, here is how I like to do it:
Add a col-centered class
<div class="col-centered col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
...
</div>
And the styles:
.col-centered{
margin: 0 auto !important;
float: none !important;
}
After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>