adjust bootstrap column width to fill the container

https://i.stack.imgur.com/tCuL6.png

I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost box aligns with the white box above it, which is also what I want to achieve on the right side. I will be sharing my code so you can see how I attempted to accomplish this.

Note: I have updated the image above. There is now a white box at the top followed by four boxes below it. I need to align the eplay box with the white box above and below it, as well as align the slide show demo box with the white box above and below it. Additionally, I need them to be evenly spaced and sized. After the eplay demo, theatre script demo, and audio speech demo boxes, I need to insert an arrow image between them, similar to the image provided below but with the right-side box aligned with the top and bottom white boxes.

https://i.stack.imgur.com/xOnbP.png

        <!--===================DEMOS ==================-->

    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 container-nopads" style="">

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
                    <a href="/versebuster2/eplay/eplay-demo.php" style="text-decoration:none;">
                        <h4><strong>ePlay Demo</strong></h4><br><br><br>
                        <img src="images/hovers/pdf-512.png" >
                    </a>
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-doc">
                    <h4><strong>Theatre Script Demo</strong></h4><br><br>
                    <img src="images/hovers/doc-512.png" class="">
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-mp3">
                    <h4><strong>Audio Speech Demo</strong></h4><br><br>
                    <img src="images/hovers/mp3-512.png" class="">
                </div>
            </div>

            <div class="col-xs-1  col-sm-1 col-lg-1 col-md-1 container-nopads" style="">
                <img src="images/arrow-right.png" class="img-responsive" >
            </div>              

            <div class="col-sm-2 col-md-2 col-lg-2 " >
                <div class="demo-box col-sm-12 col-xs-12" id="demo-pdf">
                    <a href="data/pdf/ePlayPPPDemo.pdf" target="_blank" style="text-decoration:none; ">
                        <h4><strong>Slide Show Demo</strong></h4><br><br><br>
                        <img src="images/hovers/pdf-512.png" class="">
                    </a>
                </div>
            </div>

        </div>
    </div>
    <!--===================END DEMOS ==================-->
htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, apply the .col-md-3 class:

.col-md-3 .inner {margin: 5px; background: #99f; text-align: center;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row-fluid">
  <div class="container-fluid">
    <div class="col-md-3">
      <div class="inner">One</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Two</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Three</div>
    </div>
    <div class="col-md-3">
      <div class="inner">Four</div>
    </div>
  </div>
</div>

Preview:

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

Discover the method for two form fields to submit data to a distant page, located two pages away

Currently, I'm trying to figure out the best approach for having two fields submitted to a page that is located two pages away. To provide more context, let me elaborate on the situation. On the initial page, there will be two fields - workshop title ...

javascriptphpjqueryhtmlforms

Extracting <p> elements from a separate HTML file and cycling through them

I successfully created a website using only HTML, JavaScript, and jQuery without any server-side scripting or language. Within my website, I have a simple stream.html page that remains unstyled with no CSS formatting. <html> <head> </head& ...

javascriptjqueryhtml

Tips for modifying padding in HTML and CSS?

I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried: float-right or padding-right:250px; // but nothing happens and it affects the mobile view. Please review my code: .fontProfile ...

htmlcsshtml5-canvasmedia-querieshtml5-video

Easily validate the contenteditable attribute of <td> element

I am currently working on a table that displays data from a MYSQL database. Whenever a user makes changes to an element in the table, I want the database to be updated using AJAX. Below is my JavaScript code for sending data in an editable row. function s ...

javascriptjqueryhtmlmysqlajax

Conditional jQuery actions based on the selected radio button - utilizing if/else statements

This task seemed simple at first, but I quickly realized it's more challenging than expected. Apologies in advance, as Javascript is not my strong suit. My goal is to have the main button (Get Your New Rate) perform different actions based on whether ...

javascriptjqueryhtmlcss

Issue with Semantic-UI Special PopUp not displaying on screen

I'm currently working on creating a unique pop-up feature using custom HTML, with the intention of adding content to it later on. My console is displaying the following message: Popup: No visible position could be found for the popup. $(document) ...

javascriptjqueryhtmlsemantic-ui

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

javascriptjqueryhtmlperformancegoogle-chrome

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs

Attempting to align two blocks side by side

As I work on developing my website, I encountered an issue with positioning div tags. I set up a side-navigation div and a body div within a site that is 1500px wide and 1000px tall, with the side-navigation at 300px and the body at 1200px in width. To my ...

htmlcsspercentage

Error: Unbalanced parentheses detected in the argument list at file path C:UsersgajjaOneDriveDesktopuser_loginviewsupdate.ejs during ejs compilation

When I try to update, instead of showing the form fill field, an error pops up. Can someone assist me with this? <!DOCTYPE html> <html> <head> <title>Form Data</title> </head> <body> <h1>Form Dat ...

htmlnode.jsexpressejs

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

javascripthtmlangulartypescriptforms

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here ...

htmlangularsassangular-animations

Disabling the scrollbar within angular elements

Trying to remove the two scrollbars from this code, but so far unsuccessful. Attempted using overflow:hidden without success filet.component.html <mat-drawer-container class="example-container" autosize> <button type="button&qu ...

htmlcssangulartypescriptfrontend

Is it possible to create a resizable menu without distorting its appearance?

After setting up a menu on my website, I noticed that when resizing the window, it spills over into other divs on the same line. Despite trying multiple solutions, I have been unsuccessful in resolving this issue. The navigation for the menu is contained w ...

htmlcssresponsive-design

Choosing an element with JavaScript

var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); /* Itera ...

javascripthtml

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

<select id="ordersSelect" class="drop-down" onchange="somemethod()"> <c:forEach items="${orders}" var="order" varStatus="orderStatus"> <option value="${order.id}"> ${order.publicId} </option> </c:forEach> </select> ...

htmljspjstlhtml-select

Apply the CSS style specifically to the initial row in the table

Is there a way to target the first row of a table with a different tr class using CSS? <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> ...

htmlcss

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

htmlcsscss-floatwidth