Bootstrap error on contact manager tutorial

22

Yeah… apparently I had old cli installed with npm and new with yarn.
and npm globals were before yarns in path… so I had wrong cli runing…
my bad

23

well they just issued the bug https://github.com/npm/registry/issues/292

1 Like
24

seems like they fixed it now it downloads all dependencies i should test it further thanks

:grinning:

25

i followed until this part of the tutorial

All it does is provide a container with some styling in order to display our message to the user.

Next, let’s just add a placeholder module for our contact detail screen, so we can satisfy the build. Create a new file under src named contact-detail.ts and give it the following code:
contact-detail.ts
TypeScript

export class ContactDetail {}

With this in place, you should now be able to run your application. If you haven’t stopped/restarted it after editing the bundles, then you will need to do that now. When you run the application, you should see something similar to this:

contact-app-no-selection.png990×512 8.43 KB

I see no errors on console but seems like bootstrap is still not loading correctly see the diference?

imagen
imagen1366×768 32.2 KB

26

Ok. Retracing your steps

27

Ok. I got the same result as you.
Seems there were some changes in bootstrap between 3 and 4
I’ve found a site that tries to help with conversion
http://upgrade-bootstrap.bootply.com/

when I’ve run app.html through it
it came out pretty close in rendering
image

Would be great if you can document the changes needed to upgrade the guide to BS4
It would be greatly appreciated.

1 Like
28

yes i forgot this is bootstrap 4 so it should be some changes on the html thanks now i can go forward with the tutorial :slight_smile:

29

I created a repo @ https://github.com/lancelot316/aurelia-contact-manager with Bootstrap 4 styles for the application. Bootstrap 4 simplified some of the markup needed for their styles to work. The major difference is they removed all of the panel classes and replaced them with card based classes.

1 Like
30

thanks lancelot ill check it out they should fix the html in the tutorial

31

I added a Readme to the repo I mentioned in this topic to try and document the changes to the html/css between Bootstrap v3 and Bootstrap v4. the readme still needs work but it is a start.

3 Likes
32

@lancelot316, you are awesome. Please know it.

1 Like
33

@lancelot316 added a PR with your upgrades

34

Thanks! I just pushed a couple of more updates I missed a CSS class on the form label. I also updated the readme markdown to reflect the change.

35

oops…
can you create a PR
to this doc? branch fix-bootstrap
if not, just post the differences here… I’ll add them up

36

the only changes were to the form controls. I changed the label class from “col-sm-2 form-label” to “col-sm-3-col-form-label” and the “col-sm-10” on the input div to “col-sm-9”

for example,

<div class="form-group row">
    <label class="col-sm-2 form-label">First Name</label>
    <div class="col-sm-10">
        <input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
    </div>

should be changed to

<div class="form-group row">
    <label class="col-sm-3 col-form-label">First Name</label>
    <div class="col-sm-9">
        <input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
    </div>
</div>
37

I have updated this repo with a couple of new branches for several other CSS frameworks.
I have added examples using:

I’ve included screenshots of the finished app and examples of the markup in the README in each branch. I don’t know if anyone will find them of value or not, but they are out there.