Bootstrap 4 css file disappears when new bootstrap componenet is added

[HUnknown1]

Hi There

Recently I've been having something really weird happen to my bootstrap-4.0.0.css file in DW 2018.

When I create a bootstrap site through  File > new. All the CSS and JavaScript files are automatically generated for my root site. All Good!

I then made a duplicate copy with my initials on it since the original file is locked called for example.

bootstrap-4.0.0_hh.css I then relink it to those pages on l site so that I can see the changes to the pages. At the same time the original

bootstrap-4.0.0.css file is still in the same CSS folder  with this CSS file.
However when I go to create a new bootstrap component (Tabs, Accordion, Carousel) in a blank HTML 5 page (no bootstrap ) to make edits. Dependant files are added and everything seems OK. Until after I save the HTML page, then the bootstrap-4.0.0.css disappears from my CSS folder. Only the bootstrap-4.0.0_hh.css remains.  The JavaScript files are not effected and remain in the JS folder. No other files are disappearing.

I kind of wonder what is going on here. There is nothing in the trash can and I only notice it is gone when I refresh in the files panel.  Has anyone else had this happen to them in the last few weeks?

The work-around for now is that I keep a backup in a folder near by, but its really annoying when your CSS is gone for no reason.

[BenPleysier]

I have replicated the problem and find this behaviour most weird.

However, most users will not come across this problem because they know not to touch the original CSS file, that is why Dreamweaver locks it. If you want to make a change to the style rules, create an overriding stylesheet called mystyles.css or similar and make the change in there.

As an example, I have added a Jumbotron to my page and I want to change the background colour. In bootstrap-4.0.0.css the styles rules for the Jumbotron are as

.jumbotron {

  padding: 2rem 1rem;

  margin-bottom: 2rem;

  background-color: #e9ecef;

  border-radius: 0.3rem;

}

To change the styling, I put the following Into mystyles,css

.jumbotron {

  background-color: #ffc107;

  color: #28a745;

  text-align: center;

}

If you want to use the default Bootstrap colours then there is no need to override the style rules as per this example which will give the same result

<div class="jumbotron bg-warning text-success text-center">

For complete flexibility, I use the source files (Sass) and create my own Bootstrap.css file.

[HUnknown1]

Thanks Ben,

Yes Sass is good too!

I also created an overriding style sheet as well for some areas I did not want to alter. That did not disappear. Its just odd since  there might be situations during development, where you want to test a new component separately with the default verse the changes that were made. I can understand Dreamweaver refreshing the file when a new item is added, but that it disappears, that's not good. For now I'll just keep a backup in another folder.

[Kratika Agarwal]

Hi,

Thanks for reporting.

We are not able to reproduce the issue at our end.

Could you please share more information with us:

1) What is the OS version are you using

2) Could you please share a video of the issue so as to confirm we are not missing any steps

3) Is the issue happening with a new site created and new site root folder.

Thanks

Kratika

[HUnknown1]

Hi Kratika,

To answer your questions

1) I am using a Windows 10 computer

2) Not sure if I can create a video. I can create a PDF of the steps I used, do you have an email link I can send that too?

3) The issue does not happen immediately when the new site is created with a bootstrap file only when I start adding Bootstrap components from the insert menu to a new blank HTML page with no bootstrap links.

I added another new component the next day and the issue happened again.

If I add a component that I've already added before, like tabs to another page, then the bootstrap-4.0.0.css just unlocks itself, but does not disappear.

I then add a new component link pagination to a new html5 page and it appears to link, I refresh and it disappears.

Thanks

[Kratika Agarwal]

Hi,

Thanks for the response.

Are you using local site root folder or a remote server.

Please send the pdf to kragarwaatadobedotcom

I followed below steps, please let me know if I miss any step here:

1) Launch Dreamweaver, create a new site , give a new site name and a new local site folder

2) create a new Bootstrap page name it as  index.html, save it in site folder

3) Refresh Files Panel, css and js folder gets added to site folder containing bootstrap-4.0.0.css

4) open Files panel, create a copy od bootstrap-4.0.0.css with any name bootstrap-4.0.0-copy.css

5) open the above index.html page and change the href link of bootstrap-4.0.0.css to bootstrap-4.0.0-copy.css

6) make a new HTML page, Insert any component like carousel, accordian which will add the bootstrap css and js reference to page

7) save the page inside site folder

8) refresh the Files panel

For me Bootstrap-4.0.0.css doesn't disappear.

We will try our best to resolve your issue.

Thanks

Kratika

[HUnknown1]

HI Kratika,

I have set the PDF (Bootstrap_issue_testing_r2.pdf) to the email mentioned above. From what I can see your steps are similar to mine however after step 7 first the bootstrap-4.0.0.css becomes unlocked and then when another component is added then it disappears altogether. And from the notes you will see I haven't even changed the link yet in the file.

So hopefully my note will help you,

Please, let me know if you have any further questions.

[Kratika Agarwal]

Hi,

Thanks for sharing the PDF.

We are able to reproduce the unlocking of Bootstrap css but it didn't disappear after refreshing the files panel.

Are you using 32 bit or 64 bit machine on win 10.

Thanks

Kratika

[HUnknown1]

Thanks Kratika,

I am using a 64 bit machine on win 10.

I noticed the unlocking seemed to appear first and then after the second new component is added the disappearing happened. Maybe if you add a third new component then it will happen, maybe some cause a disappearance and others cause the file to unlock?

[Kratika Agarwal · Accepted solution]

Hi,

I noticed that if you save the HTML page first and then add Bootstrap components like carousel, Accordian, Tab and save the changes then the bootstrap css becomes unlocked, but if you create a new HTML page and don't save the page first , add your components , save the page then the bootstrap css doesn't disappear.

Please try this at your end as a workaround to the problem.

Thanks

Kratika

[HUnknown1]

Yes it does seem that when you don't save the file first before adding the components, then the bootstrap css remains. When you do save the file first and then add the bootstrap components in my case the css disappears. I will try this as a workaround for now. However hopefully your company can find a way to keep the file from unlocking and disappearing.