Rails - how to integrate a form with bootstraps css

0 votes

I'd want to use Bootstrap to update the appearance of my forms.

Here's how my form's current view looks (it's quite basic...)

<div class="field">
    <%= form.label :first_name %>
    <%= form.text_field :first_name %>
  </div>

  <div class="field">
    <%= form.label :last_name %>
    <%= form.text_field :last_name %>
  </div>

  <div class="field">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>

  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div> 

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

I'm not sure how to combine the ruby code and the HTML.

Jun 9, 2022 in CSS by Edureka
• 12,890 points
356 views

1 answer to this question.

0 votes

Here is how I did it  in my case . . .

<h1 class="display-6">Add a new Barber below</h1>
  <div class="mb-3">
  <div class="form-control">
    <label  class="form-label"><%= form.label :first_name %></label>
    <%= form.text_field :first_name %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :last_name %>
    <%= form.text_field :last_name %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :age %>
    <%= form.number_field :age %>
  </div>
  </div>

  <div class="mb-3">
  <div class="form-control">
    <%= form.label :email %>
    <%= form.text_field :email %>
  </div>
  </div>
<!--Submit button below for the above form-->
  <button type="button" class="btn btn-outline-success"><%= form.submit'Create a new barber?' %> </button>
answered Jun 28, 2022 by Edureka
• 11,450 points

Related Questions In CSS

0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 11,450 points
2,029 views
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 11,450 points
125 views
0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
950 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
1,031 views
0 votes
1 answer

How to style a checkbox using CSS?

Add focus outline input[type="checkbox"]:focus + span:before { ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
97 views
0 votes
1 answer

How to convert a web page(html,css,js) into android app?

I used Phonegap a lot for this, ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 11,450 points
530 views
0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 11,450 points
138 views
0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

I've been playing with fully responsive layouts ...READ MORE

Jun 30, 2022 in CSS by Edureka
• 12,890 points
111 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 11,450 points
427 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 11,450 points
653 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP