Embracing Twitter's Bootstrap framework in your design?

When I declare my external CSS on a template within the HEAD tag, all hell breaks loose on the page if I declare another external CSS file in the same tag. However, everything seems to work fine if I keep the two CSS file declarations separate - one in the body and the other in the head.

Is it a problem to do things this way? Or should I merge the two CSS files into one big file?

All I want to do is incorporate some elements of TB into an existing layout without rewriting everything from scratch.

Thanks.

- Sample code :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Test</title>


    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->

    <!--

    -->

    <link href="../externalsheet.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    <!--

    -->
    </style>
    </head>
    <link rel="stylesheet" type="text/css" href="../cssverticalmenu.css" />

    <script type="text/javascript" src="../cssverticalmenu.js"></script>

    <body>

    <div id="wrapper">
    <div id="head"><img src="../headtop.jpg" alt="img" width="870" height="153" />
    <div>
    Club test</div>
    </div>

    <div id="content">



     <ul id="verticalmenu" class="glossymenu">
    <li><a href="index.php">Home</a></li>

    <li><a href="#">Insert and Update</a>
        <ul>
        <li><a href="insertmember.php">Add member into database</a></li>
        <li><a href="insertevent.php">Add event into database</a></li>
        <li><a href="inserttotal.php">Add member total and comment into database</a></li>
        <li><a href="updatemember.php">Update members personal details </a></li>
        </ul>
    </li>

    <li><a href="#" >Delete</a>
        <ul>
        <li><a href="deletemember.php">Remove member from database</a></li>
        <li><a href="deleteevent.php">Remove event from database</a></li>
        <li><a href="deltotal.php">Remove member total & comment from database</a></li>
        </ul>
    </li>
    <li><a href="#" >Show data</a>

    <ul>
        <li><a href="showmember.php">Show members on database</a></li>
        <li><a href="showevent.php">Show events on database</a></li>
        <li><a href="showtotal.php">Show member totals and comments on database</a></li>
        </ul>

    </ul>

      <div class="contentbox"><!-- TemplateBeginEditable name="main box" -->main box<!-- TemplateEndEditable --></div>
     <link rel="stylesheet" type="text/css" href="bootstrap.css"> // Attempt here to allow TB to work


    <div id="foot">
        <a href="http://validator.w3.org/check?uri=referer"><img
            src="../Grants.jpg"
            alt="Valid XHTML 1.0 Transitional" width="585" height="80" border="0" /></a>


      <br />
    </div>
    </div>
    </div>
    </body>
    </html>

Answer №1

It seems like there might be an issue with how your CSS is being imported. To ensure it's done correctly, here's the proper way to import your CSS into the head section:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Make sure to include Bootstrap first, followed by your custom CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/your-css.css" rel="stylesheet">
    </head>
    <body>
        <!-- Your page content goes here -->

        <!-- jQuery is necessary for Bootstrap plugins -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to align an image in the center of a div on top of another image

I am attempting to center a logo on top of a moving image that scrolls through (unfortunately, the movement isn't visible on jsfiddle). I have tried using <center> tags, but they do not work. Adding margin: auto; does not properly center the ima ...

Unexpected behavior observed when animating CSS transform in IE

I am currently facing an issue with a CSS animation on my website that animates an arrow back and forth. The animation is working perfectly on all browsers except for Internet Explorer, where there seems to be a glitch causing the Y position of the arrow t ...

Creation of tables in XSLT using dynamic techniques

My objective is to convert an XML file into an HTML file, with the contents displayed in a table format. However, I am struggling to figure out how to ensure that only four elements are shown per row. members.xml: <?xml version = "1.0"?> ...

The form tag is failing to display the Name input field

Currently, I am facing an issue with the form tag rendering like this: <form method="post" action="AdminEditListTest.aspx" id="Form1" name="Form1"> This piece of code is considered as legacy and relies on document.Form1.XXX for DOM manipulation o ...

What is the best way to bring in an HTML file into a Python variable?

I'm in the process of creating an HTML email using Python, MIMEMultipart, and SMTP. Since the HTML content is lengthy, I decided to store it in a separate HTML file. Now, my goal is to import this HTML file into my Python script (located in the same d ...

Vanishing Div on Window Resize

I am struggling with stacking two columns below a medium screen size using Bootstrap. Currently, only one column stacks while the other disappears (#purple-div). Any suggestions? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boo ...

Switch the Ionic Slide Box to the "does-continue" setting

Currently in the process of constructing a slide-box containing numerous items. I've borrowed the code from the example provided here for an infinite number of items, and it's performing well. However, I have a considerable yet finite amount of ...

Navigating to the appropriate section by clicking on a navbar item with Bootstrap 5: A step-by-step guide

Hi everyone! I am just starting out in front-end development and I was hoping to get some clarification on a topic. I need to create a one-page website where the navigation bar links scroll down to the correct sections when clicked. It's all on one pa ...

ASP.NET MVC is unable to locate the resource inside the Content folder

Trying to incorporate a trackCues.vtt file stored in my solution into my view has been a challenge. I attempted to load this resource following this code: <video style="margin-top:30px;margin-bottom:30px" width="800" height="600" controls> <s ...

Tips for saving true or false values in a dynamic form?

Is there a way to store boolean values in a reactive form where a button can have the value of true or false? The goal is to be able to access the inputs of these buttons. However, I am facing an issue because there is another form on this page for text in ...

Can you explain the error message "Uncaught TypeError: seats[Symbol.iterator] is not a function" in simpler terms?

I am currently developing a movie seat booking application, but unfortunately, I encountered an error when running the code. According to the Google console, the error is located on line 224 and it states "Uncaught TypeError: seats[Symbol.iterator] is not ...

The HTML background image adjusts to the screen size, scaling down from the middle as the screen size changes

I am still learning HTML programming and experimenting with new things. I have encountered a challenge that I need help with. I have a .png image set as the background of my HTML file. However, when I resize the screen, the sides of the picture get cut of ...

In React.js, it is required to enclose adjacent JSX elements within a parent tag

Help needed with JSX element wrapping in ReactJS What am I missing in my code?? Error message reads as follows: Adjacent JSX elements must be wrapped in an enclosing tag The issue lies within the element tags const renderTodos = currentTodos.map(( ...

Utilize a jQuery button to horizontally align text with ellipsis

I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id=&apo ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

How to extract data-bound value from a <span> element using Angular

I have a table that serves as a form, with most of the cells containing input fields. <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td> <td><input id="testingInput2" type=" ...

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Why does my code display differently in Firefox compared to Opera? In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced. This is the HTML code: < ...

Seeking guidance on embedding an HTML page within PHP code

I have a question regarding embedding an HTML page within a PHP page, specifically when using the include function like this: <?php include ("../../forms/login/form.html"); ?> My issue is that when I try to display form.php within index.php, it doe ...

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

Having trouble loading IE with jQuery isotope

Encountering a common issue on an unfamiliar browser, many still face the challenge. Setting up an isotope grid on websites seems to function seamlessly across various browsers, except for when testing in Internet Explorer using . In this case, the layout ...