Participant

Answered

Using Bootstrap.css

Forum|Forum|7 years ago
March 1, 2018
2 replies
846 views

I am a student and working with Bootstrap for the first time. The text for our class is from 2014 and the instructions for this week's assignment are for using fluid grid layout. I have to figure out how to bridge the two and am wondering if anyone out there has experience with this. My first question is when creating the bootstrap, do I attach the the two css files that I currently have created in my project? DW asked me to overwrite a couple of things (which I now can't remember) and that makes me nervous. Any advice would be greatly appreciated.

I have 3 things in my Sources menu - ALL Sources, boilerplate.css and su.styles.css. I really want to understand if I am supposed to attach them to the bootstrap and if I do, will it mess up anything for the other parts of the project website.

I don't know what else to post, so if more info is needed to answer my questions please let me know.

This topic has been closed for replies.

Correct answer B i r n o u

the way to swap from one method to an other is not just based on swapping CSS files. Most of the time the all CONTENT (text, images, medias...) is meshed in a structure (HTML) ... then classes, id... are added to this structure in order to be able to identify the elements and apply to them on the one hand a layout, but also a visual identity, and these two aspects of the model are related to the use of styles (CSS).

Not to mention that an interactive layer (JS) can also rely on these elements of identification (classes and ID). so before replacing them, one have to be sure that no ones rely on them.

CSS are applied at two levels... first for the layout (the one that has to be swap) and second for the visual aspect (colors, fonts, ornamentation..) ... changing tech (from fluid grid to bootstrap) should only affect the first one (structure)... but... there is a but... bootstrap is quite intrusive (unlike other frameworks), that is, it also provides a visual layer to all components.

of course it is quite possible to act on this visual layer, but it requires a minimum of skills that do not necessarily go hand in hand with the use of such a framework.

you say that the site was built using (at the layout level) a fluid grid layout ... having to switch to bootstrap, then consists in locating in the structure all the classes that are then present and used for the fluid grid, and adapt them with the one used by bootstrap.

but then the problem is going to be to make sure that the HTML structure makes it possible to apply components Bootstrap, which is not necessarily the case. (the nested div used for fluid grid are not the same than the ones used for bootstrap, idem on a component level (menu, image bloc and so on)...)

I think that in order to undertake such an operation, it is important to ask yourself a few questions, namely:

does this recasting operation come from an imposed exercise?
what is the overall volume of the site and are all pages based on the same model?
is there a template for this site?

Nancy OShea

Community Expert

As Birnou correctly said, the HTML structure in Bootstrap is very different from legacy Fluid Grid Layouts. The old FGLayout code is not compatible with Bootstrap and vice versa.

Bootstrap uses a 12-box grid system inside a container and row. In this example, 4 columns on desktops breaks to 2 columns on smaller devices and 1 column stacked vertically on mobile phones. This is achieved through column classes for xs, sm, md & lg devices.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>Resize this responsive page to see the effect!</p>

</div>

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column 4</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

</div>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

marlealipkaAuthor

Participant

Could you look at my reply to Birnou My bootstrap page has issues. (Sand crab cafe) http://student.msubillings.edu/mis310/marlea.lipka/index.html http://student.msubillings.edu/mis310/marlea.lipka/index.html

Nancy OShea

Community Expert

First of all, this is NOT Bootstrap. It's legacy Fluid Grid Layouts which I don't recommend using. 2 totally different frameworks with vastly different features -- Bootstrap being the better one. I also don't understand why a course would make any mention of FGLayouts in a 2018 syllabus. This is an old feature that should be allowed to die.

Below is a basic Bootstrap 4 layout.

You can copy & paste the code below into a new, blank document and play with it in DW 2018.

<!doctype html>

<head>

<title>Bootstrap 4 Starter Page</title>

<style>

body {padding-top: 3.5rem}

/**placeholder image**/

.jumbotron {background: url(https://placeimg.com/1200/500/arch) no-repeat center center fixed;

background-size:cover;

}

.jumbotron > .container {background: rgba(0,0,0,0.5); padding: 3%; color:#FFF}

</style>

</head>

<body>

<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-center fixed-top"> <a class="navbar-brand" href="#">Brand / Logo </a>

</button>

<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

</ul>

</div>

</nav>

<h1 class="display-3">Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>

</div>

<hr>

</div>

</main>

</footer>

<!-- Bootstrap core JavaScript

Placed at the end of the document so tpages load faster -->

</body>

</html>

Nancy

Nancy O'Shea— Product User & Community Expert

B i r n o uCorrect answer

Legend

the way to swap from one method to an other is not just based on swapping CSS files. Most of the time the all CONTENT (text, images, medias...) is meshed in a structure (HTML) ... then classes, id... are added to this structure in order to be able to identify the elements and apply to them on the one hand a layout, but also a visual identity, and these two aspects of the model are related to the use of styles (CSS).

Not to mention that an interactive layer (JS) can also rely on these elements of identification (classes and ID). so before replacing them, one have to be sure that no ones rely on them.

CSS are applied at two levels... first for the layout (the one that has to be swap) and second for the visual aspect (colors, fonts, ornamentation..) ... changing tech (from fluid grid to bootstrap) should only affect the first one (structure)... but... there is a but... bootstrap is quite intrusive (unlike other frameworks), that is, it also provides a visual layer to all components.

of course it is quite possible to act on this visual layer, but it requires a minimum of skills that do not necessarily go hand in hand with the use of such a framework.

you say that the site was built using (at the layout level) a fluid grid layout ... having to switch to bootstrap, then consists in locating in the structure all the classes that are then present and used for the fluid grid, and adapt them with the one used by bootstrap.

but then the problem is going to be to make sure that the HTML structure makes it possible to apply components Bootstrap, which is not necessarily the case. (the nested div used for fluid grid are not the same than the ones used for bootstrap, idem on a component level (menu, image bloc and so on)...)

I think that in order to undertake such an operation, it is important to ask yourself a few questions, namely:

does this recasting operation come from an imposed exercise?
what is the overall volume of the site and are all pages based on the same model?
is there a template for this site?

marlealipkaAuthor

Participant

I have the page set up and published. The page contains the required elements. But the background doesn't have any restraints, like the other pages. I do have validation errors that I am afraid to touch. I also have CSS errors. The main thing though is that my bootstrap page doesn't look like the others. Could you look at my published and tell me where to go to correct. It is the Sand crab cafe page that I applied the bootstrap exercise too. ...http://student.msubillings.edu/mis310/marlea.lipka/index.html

I am a student, so I am not prepping for a client. Only a grade on the line.

B i r n o u

Legend

it looks like in the first page you use a surrounding master container <div class="gridContainer clearfix"> <div id="content" class="fluid"> and you don't use it in the cafe.html page...

(if you look this thread from a mailer... please visit my last answer... copy paste, doesn't accept multi crop in buffer... sorry)

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