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

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?

We are currently involved in the process of upgrading an outdated corporate intranet. The challenge is that our users primarily rely on IE8 and IE9, while most of our sites were designed to function with compatibility for browsers between IE5 - IE9. While ...

htmlcsshyperlinktitle

What is the correct way to execute a jQuery trigger on a checkbox or radio button to simulate a user clicking on it?

My current page utilizes can.js, making it challenging to replicate the issue on jsfiddle.net. The result I am experiencing is as follows: When I click on a checkbox (or even a radio button), an input text box should update accordingly (for example, displ ...

javascriptjquery

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

htmlcssbootstrap-5

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

I am experiencing an issue with the mobile version of a website where the dropdown menu is not fully visible due to the position of a specific menu item and the number of items in the dropdown. The image below shows how I would like it to be displayed, fo ...

htmlcsstwitter-bootstrap-3

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

htmldjangobootstrap-4

Struggling to display or transmit information from middleware in Node.js

I currently have an express server running on port 8082. When I access the route "/" as a GET request, it renders the index.html file. Then, I submit its form to "/" as a POST request using the app.js script. This route contains a middleware named "validat ...

javascriptjqueryexpresspostmiddleware

Display or conceal section based on selected checkboxes

I'm currently working on a JavaScript script that involves showing/hiding elements based on radio button and checkbox selections. The goal is to reveal a hidden section when certain checkboxes are checked, as illustrated in the screenshot below: http ...

javascripthtml

Adding text and buttons to the initial image in the slider: a step-by-step guide

I'm facing an issue with my html image slider as I try to add buttons and text to the first image but it keeps getting overridden. <div id="captioned-gallery"> <figure class="slider"> <figure> & ...

htmlcsstextslider

Issue with pagination functionality post-Ajax request on Rails platform

I am working on implementing pagination using the Kaminari plugin. As I Ajaxify my application, I have run into an issue. I have a form that contains paginated data along with another form used for filtering that data (both work via Ajax). Initially, the p ...

jqueryruby-on-railsajaxkaminari

Interactive image map with hover effects and external image swapping placed beyond the container

I've encountered a problem with a responsive image map and rollovers. Using Matt Stow's responsive image jQuery plugin ensures that coordinates are responsive, and clicking on an area brings up Lightview as expected. However, the issue arises whe ...

phpjavascriptjqueryresponsive-design

Create a dynamic MUI icon that adapts to different screen sizes

Struggling to make the MUI DeleteIcon responsive and clickable. <ListItem> <ListItemAvatar> <Avatar src={sprites.front_default}> <ImageIcon /> </Avatar> </ListItemAvatar> <ListItemText pr ...

htmlreactjsmaterial-uiicons

I haven't quite reached success yet, but I am working on getting my slideshow to display on my local server

My homepage is fully loading, but the slideshow feature is not functioning correctly. I have a file called slide.js in my /lib directory that I am trying to integrate into my homepage. The images are referenced properly and working, but they are not displa ...

htmlcssnode.jsexpressexpress-handlebars

Selenium is unable to interact with iframes

I'm attempting to extract the Job Description and Job Requirements from this specific link using selenium. Check out my code below: driver = webdriver.Firefox() url = "https://www.jobsbank.gov.sg/ICMSPortal/portlets/JobBankHandler/SearchDetail.do?id= ...

pythonhtmlseleniumiframe

What is the best way to integrate a vh property instead of px for a scrolling navigation using jQuery?

I want to achieve a navigation bar that fades in after scrolling 100% of the viewport height, but all examples I find use a pixel value instead of viewport height. Is there a way to convert window height into jQuery to make this work? Thank you in advance ...

jquerycssviewport-units

Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table. You can find the complete code here: http://jsbin.com/xihebol When s ...

javascripthtmlcss

What is the most effective method for dynamically creating an HTML report from scratch?

I need help figuring out the best way to convert a substantial amount of program output into an HTML report. Right now, I am manually piecing together the report by extracting relevant information from the extensive logging in my large Python program and f ...

pythonhtmltemplatesreport

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

cssgnome-shell-extensionsgjscluttercinnamon

Is there a way to modify the default color when the header is assigned the "sticky" class?

Currently, I am in the process of building my own website and have implemented an exciting hover effect that randomly selects a color from an array and applies it when hovering over certain elements. However, once the cursor moves away, the color reverts b ...

javascripthtmljquerycssarrays

Guide to automatically refresh the source link every 5 seconds using a different .php link

Is there a way to automatically refresh the source link every 5 seconds in order to display an image from another page on index.php? On index.php <img id="img1" class="imgNews" src="https://example.com/car.jpg"> On other.php <span id="link1"&g ...

javascriptphphtml

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

javascripthtmlcssioscss-animations