HTML block failing to implement Bootstrap styling

I am struggling to integrate Bootstrap into Drupal. I have used the 'row' class for the contact ID and added col-sm-12 for title and desc, but it is not working as expected. The width of the container seems off. Also, the accordion.js script works fine, but the CSS for Bootstrap does not seem to be applied correctly.

(function ($) {
                function contactList(){
                    // JavaScript code goes here
                }
                
                jQuery(document).ready(function($) {
                    contactList();
                });
             });
.contactForm{
                /* CSS Styles go here */
            }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

jqueryhtmlcss

Answer №1

Make sure to include jQuery before adding the bootstrap.js file.

Answer №2

Your problem lies within this function:

    (function ($)
            ......
    })

Modify it to:

    (function ($)
            ......
    })(jQuery);

To learn more, you can visit What does (function($) {})(jQuery); mean?

Functional snippet: 

(function ($)
{
    function contactList(){
        $('.view-content .contactDesc:first').css('display','block');
        $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
        $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
        $('.officeAddress .colorme:visible:odd').addClass('grey');
        $('.officeAddress .colorme:visible:even').addClass('purple');
        $('.contactTitle').click(function(){
            if(!$(this).hasClass('active')){
                $('.contactTitle .glyphicon ').removeClass('rotate');
                $(this).find('span.glyphicon').toggleClass('rotate');
                $('.contactDesc').slideUp();
                $('.contactTitle').removeClass('active');
                $('.contactDesc').removeClass('active');
                $(this).next('.contactDesc').addClass('active');
                $(this).next('.contactDesc').slideDown(function(){
                    $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
                    $('.officeAddress .colorme:visible:odd').addClass('grey');
                    $('.officeAddress .colorme:visible:even').addClass('purple');
                });
                $(this).addClass('active');
            }
        });
    }
    jQuery(document).ready(function($) {
        contactList();
    });
})(jQuery);
.contactForm{
    width: 960px;
    margin: 0 auto;
    margin-top: 59px;
}
.contactForm img{
    width: 960px;
    height: auto;
}
.officeAddress{
    width:960px;margin:0 auto;
    font-family: Raleway;
}
.contactTitle{
    width:960px;
    display: inline-block;
    padding: 18px 40px 18px 40px;
    font-size:20px;
}
...

    </div>
</div>

Answer №3

In continuation of my previous comment, it is important to include the jquery.js file before integrating the bootstrap script and styles.

(function ($)
{
    function contactList(){
        $('.view-content .contactDesc:first').css('display','block');
        $('.view-content .contactTitle:first , .view-content .contactDesc:first').addClass('active');
        $('.view-content .contactTitle:first .glyphicon').addClass('rotate');
        $('.officeAddress .colorme:visible:odd').addClass('grey');
        $('.officeAddress .colorme:visible:even').addClass('purple');
        $('.contactTitle').click(function(){ 
            if(!$(this).hasClass('active')){
                $('.contactTitle .glyphicon ').removeClass('rotate');
                $(this).find('span.glyphicon').toggleClass('rotate');
                $('.contactDesc').slideUp();
                $('.contactTitle').removeClass('active');
                $('.contactDesc').removeClass('active');
                $(this).next('.contactDesc').addClass('active');
                $(this).next('.contactDesc').slideDown(function(){
                    $('.officeAddress .colorme').removeClass('grey').removeClass('purple');
                    $('.officeAddress .colorme:visible:odd').addClass('grey');
                    $('.officeAddress .colorme:visible:even').addClass('purple');
                });
                $(this).addClass('active');
            } 
        });
    }
    jQuery(document).ready(function($) {
          contactList();
    });
});
.contactForm{
    width: 960px;
    margin: 0 auto;
margin-top: 59px;
}
...
... (CSS code continues)
...
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="contact" class="row">
<div class="view view-contact view-id-contact view-display-id-block view-dom-id-afcbc0b58ed02301ac5efcccfc9ea312">
... (HTML code continues) ...

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

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...

javascriptjqueryhtmlcssmaterial-design

What steps should I take to make the image appear on the browser?

I am having trouble displaying an image on a webpage in the browser. Despite using the correct path to the image, only the alt tag is being shown along with an ordered list below it. Strangely, Visual Studio Code suggests files while building the path in t ...

htmlnode.js

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

htmlcssflexbox

Utilize a for loop within a query to showcase a modal popup

I have a specific requirement: I want to display a modal popup window based on a for loop using jQuery. I have attempted the following approach, where I want the modal popup to be displayed based on the value of a flag. For example, if the Flag value is 3, ...

javascriptjquery

My custom class is being ignored by Tailwind CSS within breakpoints

I'm attempting to incorporate some animation on the height property within the md breakpoint, but for some reason Tailwind CSS isn't applying my class. <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? ...

cssreactjsnext.jstailwind-css

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

javascriptcssreactjsnext.jsaccordion

Creating a blog "post" model in Ruby on Rails with CSS that can behave in two distinct ways

I am in the process of creating a blog using Ruby on Rails. The posts on my blog are generated from the Posts model, and I want them to exhibit two different behaviors. Currently, I have configured it so that a new post is automatically created every day. ...

cssruby-on-rails

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

Tips for preventing users from entering special characters into input fields

How can I prevent users from entering the # character into an HTML input field? I attempted to use the pattern attribute, but it does not seem to be effective. I included this pattern in my input element: pattern="[^-#]+" I expected that this would disa ...

javascripthtml

The white-space property disrupts the normal width of elements

My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...

htmlcssoverflowword-wrap

I am looking for a way to distinguish between mandatory and non-mandatory input fields in React

I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rou ...

cssreactjsmaterial-ui

Tab order in Angular Forms can be adjusted

While constructing a two-column form for simplicity, I utilized two separate divs with flexbox. However, the tabbing behavior is not ideal as it moves down the form rather than moving across when using the tab key to navigate between inputs. I am seeking a ...

htmlangularangular-forms

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

htmlcssflexboxflex-grow

Uploading Multiple Files with Ajax and jQuery

I've been trying to implement an ajax multiple file upload form, but I'm facing issues with its functionality. Here is the HTML Code: <form method="post" id="postfrom" enctype="multipart/form-data"> <input type="file" name="file" i ...

phpjqueryajax

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

The jQuery .ajax function works perfectly in Firefox but encounters issues in IE7 and IE6

Regarding my previous inquiry: Issues with jQuery .load Method causing page refresh AJAX After switching to the .ajax method instead of .load, it now works smoothly in Firefox but encounters problems in IE7 or IE6: $('ul#coverTabs > li > ...

jqueryajaxinternet-explorer-7internet-explorer-6

Implementing a loop in jQuery is not functioning as expected

Can someone help me figure out how to use a for loop to create a jQuery function? I'm having trouble when adding the array parameter in the string, it just doesn't seem to work correctly. Any suggestions? var ids=["width_uncheck","thickness_unch ...

jqueryarraysfor-loop

Dynamically load the configuration for a JQuery plugin

Currently, I am utilizing a JQuery plugin from this source. My goal is to dynamically load the configuration of the plugin without directly modifying it within the plugin file. Below are the default options provided by the plugin: $.Slitslider.def ...

javascriptphpjqueryjquery-plugins

Formatting won't assist in aligning Facebook button

I am currently working on a page that includes a div with a Facebook recommend button. In order to style the Facebook code, I enclosed it with this formatting: <div style="align:center"> <div id="fb-root"></div> <script src=" ...

htmlcss

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

javascriptjqueryhtml