Unable to configure slick carousel to a 12-column grid in Bootstrap

When attempting to set my carousel to col-xs-12, the columns do not align correctly within the slick carousel in Bootstrap.

If I change it to col-xs-6, it works fine but then two grids appear in one row. I require more space for my carousel. Could I be overlooking something?

<div class="col-md-12">
<div class="row">
  <div class="col-xs-12 col-sm-6  col-md-6 col-lg-3">
    <h3 class="mb-10">User Type</h3>
    <div class="slider responsive">
      <div class="row">
        <div class="col-md-12">
          <div class="statusbox mb-0">
            <h2>Independet Agent</h2>
            <div class="statusbox-content">
              <strong>497</strong>
              <span>Updated 27/04/2015</span>
            </div>
            <!-- /.statusbox-content -->
            <div class="statusbox-actions">
              <a href="#"><i class="fa fa-eye"></i></a>
              <a href="#"><i class="fa fa-bar-chart"></i></a>
              <a href="#"><i class="fa fa-share-alt"></i></a>
            </div>
            <!-- /.statusbox-actions -->
          </div>
          <!-- /.statusbox -->
        </div>
      </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-md-12">
          <div class="statusbox mb-0">
            <h2>Company Agent</h2>
            <div class="statusbox-content">
              <strong>1.319</strong>
              <span>Updated 27/04/2015</span>
            </div>
            <!-- /.statusbox-content -->
            <div class="statusbox-actions">
              <a href="#"><i class="fa fa-eye"></i></a>
              <a href="#"><i class="fa fa-bar-chart"></i></a>
              <a href="#"><i class="fa fa-share-alt"></i></a>
            </div>
            <!-- /.statusbox-actions -->
          </div>
          <!-- /.statusbox -->
        </div>
      </div>
      <!-- /.row -->
    </div>
    <!-- /.slider-->
  </div>
  <!-- /.col-* -->
  <div class="col-xs-12 col-sm-6  col-md-6 col-lg-3">
    <h3 class="mb-10">User Membership</h3>
    <div class="row">
      <div class="col-md-12">
        <div class="statusbox">
          <h2>Balance</h2>
          <div class="statusbox-content">
            <strong>$25,000</strong>
            <span>Updated 27/04/2015</span>
          </div>
          <!-- /.statusbox-content -->
          <div class="statusbox-actions">
            <a href="#"><i class="fa fa-eye"></i></a>
            <a href="#"><i class="fa fa-bar-chart"></i></a>
            <a href="#"><i class="fa fa-share-alt"></i></a>
          </div>
          <!-- /.statusbox-actions -->
        </div>
        <!-- /.statusbox -->
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.col-* -->
</div>
<!-- /.row -->
</div>

This script is for slick:

<script>
$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
});

jquerycsstwitter-bootstrap

Answer №1

It's taking some time for me to fully grasp the essence of your question. I suggest a few modifications that might help steer you in the right direction:

  • Try removing the initial "col-md-12" container.
  • Consider changing the structure of your two columns from 
    <div class="col-xs-12 col-sm-6  col-md-6 col-lg-3">
    to <div class="col-md-12">

Does this align with where you want to head? What specific goal are you aiming to achieve?

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

Infinite loop readiness with JQuery

My current project involves preloading images and seamlessly fading them in once they are fully loaded using JQuery. To achieve this, I attempted to create an invisible image tag where the images would load before setting the source back to the original im ...

javascriptjqueryimagepreloader

How to use jQuery to extract a JSON snippet from a lengthy string

I received an AJAX response in the form of a lengthy string, which includes HTML and JSON data. The JSON object is embedded within the string and not always at the end. My goal is to extract the JSON object from the string so that I can utilize it with th ...

javascriptjqueryjson

Utilize JQuery AJAX to retrieve a PHP array and then store it in a JavaScript variable

I am facing a challenge that seems simple to resolve, but it's proving to be quite tricky. Currently, I have a functional PHP file that fetches data from a database and stores it in an array. This file does not require any parameters and the output i ...

phpjqueryajaxjsonsynchronous

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...

javascripthtmlcssgrid

Making use of JavaScript's XMLHttpRequest() function allows for seamless

My issue revolves around my use of multiple XMLHttpRequest() requests in order to retrieve the value (miniTable) returned by the TableRow() function. Strangely, while I get the desired value when using alert() at the end of the TableRow() function, the T ...

javascriptjqueryxmlhttpxmlhttprequest

Utilize JavaScript to extract and exhibit various SQL records stored within a multidimensional array

How can I use JS, JQuery, PHP, and MySQLi to automatically generate an HTML table within a div on a webpage? The table should display data based on user-input search criteria. For example, the user enters a start date and end date, clicks a button, which t ...

javascriptjqueryarraysjsonmysqli

Leverage the power of jQuery and AJAX in conjunction with the Laravel framework to showcase and

I am currently working on a page that showcases various products. Initially, I had set up a route as follows: Route::get('products/{category}/{subcategory}') In my controller, I was returning results from the database to display the items. Howe ...

jqueryajaxlaravel

Customize the appearance and text in the navigation bar

Currently, I am in the process of creating my own personal website template. However, I have encountered an issue with styling the image and text within the navbar. I am looking to adjust the aspect ratio of the image in order to center it within the n ...

htmlcss

What are some alternatives to tables for displaying two lines of headings and corresponding data?

Here is a snippet of HTML code I am working with: <div><span class='top'>Answered</span></div><div id="hour">15</div> <div><span class='top'>Not Answered</span></div ...

htmlcss

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

javascriptjqueryhtmlcss

Avoid relying on automated CSS generation

In my _layout.scss file, I have the SCSS code snippet below: .wrap { display: flex; flex-wrap: wrap; } After compilation, the above SCSS is automatically transformed to the following CSS. However, I want to exclude the (display: -webkit-box;) pro ...

csssass

How can we reduce the use of !important in SCSS when working with React and Material UI?

In my current project, I am developing a Select component in React with Material UI. The CSS styling for the component is managed through an external SCSS sheet imported into the script file. While working on restyling the component, I found it challengin ...

cssreactjssassmaterial-ui

Upon selecting the hamburger menu, the menu pops up; however, the homepage text is visible overlapping the menu

I'm in the process of developing a responsive portfolio page using ReactJS and Tailwind CSS. When the screen size is smaller than the medium breakpoint, a hamburger menu icon appears. However, when I click on the hamburger icon to view the menu items, ...

cssreactjstailwind-css

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

javascriptjqueryhtmlajaxautocomplete

Combine the values of two numbers and then proceed to multiply them by another number with the help of

I am attempting to perform calculations on three numbers - adding two of them and then multiplying the result by the third number every time a key is pressed in one of the input fields. I am using PHP and Ajax to achieve this functionality. Below are snipp ...

phpjqueryajax

By pressing the "showMore" button, the page dynamically pulls in a json list from a file

Currently, my focus is on a dropwizard-Java project. My task involves retrieving and showcasing the first 10 items from a json list in a mustache view. If the user clicks on the "show more" link, I should retrieve the next 10 elements from the list and d ...

javascriptjavajqueryjsonmustache

What is the difference in performance between using element.class { ... } compared to just .class { ... } in CSS?

Is there any impact on performance when specifying div.class or p.class instead of just .class if a certain class will only be used on divs or paragraphs? ...

cssperformanceoptimization

An issue has arisen where FormData fails to send the value of a

My current issue involves submitting a form using FormData. Interestingly, all input types are functioning as expected except for checkboxes. When the checkbox value is set to 1 or 0, Ajax fails to post it. <form id="update-form" method="PUT" enctype= ...

jqueryajaxlaravel

What steps can I take to ensure a website designed for Firefox will work seamlessly on Safari and Chrome browsers as well?

As someone who is still learning about web development, I find myself struggling with browser compatibility issues. It's frustrating to see my website looking different in Chrome compared to Safari. While I know that browsers interpret code differentl ...

htmlcssfirefoxsafariwebkit

The jQuery included does not function properly in production mode and results in an error stating that it is not a function

After placing the jquery.placeholder.js file in the assets/javascripts folder, I successfully applied the function in my coffeescript file and it worked perfectly. $(document).ready -> $('input, textarea').placeholder(); However, when swit ...

javascriptjqueryruby-on-railscoffeescript