twitter-bootstrap


Bootstrap: Remove form field border


I am new to CSS and I am using Bootstrap and I want to use forms in 2 ways: With or without borders around the form fields. How can I achieve that best? Here is an example of a Bootstrap form I want to remove the borders for: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.
For curiosity, the reason I want this, is that I want to first show the user the data he has, and then toggle showing the borders according to if the form is in "edit" mode or not. The user can enter "edit" mode by clicking an "edit"-link or just start editing a field.
In that example, to remove the border simply write:
.form-control {
border: 0;
}
In your CSS file.
This will remove borders from all your form fields though, a more flexible approach would be to attach a class to the form fields you want to have no border, so your HTML would be something like:
<input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email">
and your CSS:
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

Related Links

How to Align Ingredients Form In Bootstrap [Inventory System]
Bootstrap alert will not show
Change div rows order in bootstrap 3
Bootstrap navbar-collapse not dropping on mobile
Inline form vertical spacing issue
Embedded video shows a totally other video
Customizing spree e-commerce view
bower install bootstrap-saas giving ENOTFOUND error
Bootstrap button not working in Internet Explorer
Hide Bootsrap modal in mobile
Bootstrap Datetimepicker issue occured
Combine 2 streams
Bootstrap 3 affix offset-bottom behaviour
How can I remove the prev and next button in datatable bootstrap pagination if there's only one or two pages?
How can I highlight table cells that have been edited and those that are updated as a result?
Working with meteor wizard steps?

Categories

HOME
c#
drupal
google-cloud-pubsub
xamarin.forms
liquibase
query-string
aggregate-functions
osx-yosemite
samsung-gear-s2
camunda
aggregate
jsfiddle
k-means
ofbiz
airbnb
md2
aiml
cherrypy
prepros
formtastic
multiple-inheritance
typeorm
kundera
andengine
loopback
contextmenustrip
rtos
rythm
kepserverex
origami
server-side-swift
icu
bzip2
nao-robot
noise
photoshop-script
jenkins-docker
openpgp.js
petapoco
suitesparse
ownership
easy-thumbnails
qudpsocket
universe
django-celery
nugetgallery
factorization
bluetooth-lowenergy-4.2
videoview
redquerybuilder
om
p4python
sony-xperia
grunt-contrib-connect
qf-test
novell
lwuit
zoneminder
debuggervisualizer
webshim
satisfiability
sqldatasource
fastcgi-mono-server
html5-filesystem
node-mongodb-native
nvcc
xcode5.1
static-class
record-locking
mosix
dd4t
windows-scheduler
bho
biztalk-deployment
rbm
setcookie
urlfetch
yii-components
android-memory
pdf-reader
reflexil
wxperl
mvcmailer
jmesa
visual-leak-detector
yii-cactiverecord
jqzoom
http-response-codes
onunload
lgpl
conditional-operator
linq-to-mysql
mysql-logic
newspeak
carbon-emacs
script-tag

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile