Bootstrap 4 css file disappears when new bootstrap componenet is added

Question

Hi ThereRecently 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.

Kratika Agarwal · Accepted Answer

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?

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

BenPleysier · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded