Bootstrap is a easy to use frontend framework that enables you to quickly style your applications.
We will be using bootstrap in all our projects going forward.
##Step 1
Lets start by getting the CDN code from their site. http://getbootstrap.com/getting-started/.
Copy the CDN code
##Step 2
We now need to paste that code as is in our students table.
Add a new head tag and copy the code so that now the html looks as follows
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity_no="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity_no="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity_no="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<table >
<tr>
<th>Name</th>
<th>Email</th>
<th>Course</th>
</tr>
@foreach($students as $student)
<tr>
<td>{{$student->name}}</td>
<td>{{$student->email}}</td>
<td>{{$student->course}}</td>
</tr>
@endforeach
</table>
</body>
</html>
##Step 4
Reload the students url /students
Bootstrap should have introduced a font, background and some other niceties. Things looking good but we can make them look even better.
Let us tell bootstrap how our application looks like. We do that by assigning classes to the elements.
Lets start by adding class table to the table.
Your table should now look like this
<table class="table">
Reload the page to see the difference.
##Step 5
In this step, let us apply bootstrap to forms. The steps are the same as above.
But now for form instead of class we provide role as follows
<form class="form" method="post" action="/students/add">
We now need to format our html in the form in a way that bootstrap will understand.
This involves:
- Wrap all label - input combinations in a div tag with class form-group
- Add class form-control to all input tags
Your form code should now look like this
<form role="form" method="post" action="/students/add">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email"/>
</div>
<div class="form-group">
<label for="course">Course</label>
<input class="form-control" type="text" name="course"/>
</div>
<input type="hidden" name="_token" value = "{{csrf_token()}}"/>
<input class="form-control" type="submit" value="Submit"/>
</form>