"Enhance your design with a custom-made box layout using Bootstrap

I am trying to create a bootstrap responsive layout with four center-aligned boxes, each containing an image and text. However, the boxes are not displaying properly and there is no space between them. Please refer to the attached image for reference.

This is what I have tried so far:

<div class="row justify-content-center">
    <div class="col-4 colMenu">
        <h3>SAMPLE TEXT</h3>
        <img src="./assets/img/sample.png" class="menuImg">
    </div>
    <div class="col-4 colMenu ">
        <h3 >SAMPLE TEXT</h3>
        <img src="./assets/img/sample.png" class="menuImg">
    </div>

    <div class="w-100"></div>

    <div class="col-4 colMenu ">
        <h3>SAMPLE TEXT</h3>
        <img src="./assets/img/sample.png" class="menuImg">
    </div>
    <div class="col-4 colMenu">
        <h3 >SAMPLE TEXT</h3>
        <img src="./assets/img/sample.png" class="menuImg">
    </div>
</div>



.colMenu{
      border-style: solid;
      border-width: 3px;
      border-color: #000000;
}

.menuImg{
    height: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

https://i.sstatic.net/MRq5J.png

htmlcssbootstrap-4

Answer №1

Make sure to include margin for each box as padding is not taken into account by the border property.

.colMenu {
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  margin: 0 0 10px 10px;
}

Answer №2

Are you unsure about the spacing required between the boxes? If so, you can utilize the calc() function to adjust it for the col-4. Assuming you are working with the latest version of Bootstrap:

.colMenu{
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  width: calc(33.333333% - 30px); /* 30px encompasses both side margins (15+15 = 30) */
  margin:15px; /* Margin added */
}

Keep in mind that for responsive design, you will need to make modifications based on the screen size.

<!DOCTYPE html>
<html>
<head>
<title>Modal</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
.colMenu{
border-style: solid;
border-width: 3px;
border-color: #000000;
width: calc(33.333333% - 30px);
margin:15px;
}

.menuImg{
height: 40%;
margin-left: auto;
margin-right: auto;
display: block;
}
    </style>
</head>
<body>
<div class="row  justify-content-center">
<div class="col-4 colMenu">
     <h3>SAMPLE TEXT</h3>
    <img src="https://via.placeholder.com/150x150"
class="menuImg">
</div>
<div class="col-4 colMenu ">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>

<div class="w-100"></div>

<div class="col-4 colMenu ">
<h3>SAMPLE TEXT</h3>
<img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
   <div class="col-4 colMenu">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
</div>
</body>
</html>

Answer №3

Are you aiming to achieve a particular layout here? Is the goal for your code to mirror what is shown in the image?

In my opinion, attempting to combine bootstrap with hardcoded CSS rules seems like a mistake. Additionally, can you explain the purpose of 

<div class="w-100"></div>
?

Are you looking to display 2x2 blocks or 4 blocks inline?

If you prefer the first scenario, you should consider using the following code:

<div class="row">
      <div class="col-md-6 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3>SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
 </div>

For the second scenario, you will need to replace "col-md-6" with "col-md-3" as follows:

<div class="row">
      <div class="col-md-3 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
...

If you wish to center and reduce the size of the blocks, you can manipulate the offset and size parameters. For instance, in the first example, you could use 

<div class="col-md-offset-1 col-md-5">
and 
<div class="col-md-offset-5 col-md-5">
, or something similar ;)

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

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

What could be causing this slider to malfunction in Firefox?

I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...

javascriptjquerycsstwitter-bootstrap

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

htmlcsstags

The reason for variation in the width setting for input elements

I've been scratching my head for a while now trying to figure out why the width of input elements isn't setting correctly. In this example, I set the width to 100px for the submit button But in this one, I also set it to 100px for the text fie ...

htmlcsswidthquirks-mode

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

htmlcss

What is the best way to create a <div> that will automatically start a new line based on the user's input?

Is it possible to create a div that automatically inserts a new line for each new line in the code it detects when typing? For example, if I type: <div> Hello, World! How are you doing today? </div> This would normally be displayed as ...

htmlcss

What is the best way to adjust the width of a column to perfectly fit its contents when using IE9 compatibility mode?

Within my HTML code, I've included the table displayed below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> table, td, tr, th{ border:1px; } .onepx{ ...

htmlcssie-compatibility-mode

Update the button functionality according to the button's unique identifier

I am trying to dynamically change the button's redirect link based on its ID in my NEXT.JS project, but as a newcomer to this framework, I am unsure of how to accomplish it. I understand that this modification should be done after rendering, possibly ...

javascripthtmldomswitch-statementnext.js

Establish the height of the root to be the same as the height

As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below. <style> #background{ background-c ...

htmlcss

Is it possible to create a mouse-following effect with lighting using Javascript

Recently, I've been honing my Javascript skills and decided to create a follow-mouse function. After successfully implementing it, I started brainstorming a new concept that I'm unsure is achievable. Is there a way to develop an "orb of vision" ...

javascripthtmlcss

Is there a way to obtain the function associated with an onclick attribute?

I have a function attached to the onclick event in the HTML, as shown below: <script> function f1(){ alert('hello world'); }; </script> <a onclick="f1()">test</a> I want to manipulate that function by binding it to ...

javascriptjqueryhtml

Tracking Time Spent in a Tab using HTML and JavaScript

I have a unique issue that requires a specific solution. Despite my extensive search across the internet, no useful answers were found. This is the snippet of HTML code in question: <form action="/timer.php" method="POST"> <span>Fir ...

javascriptphphtmlmysql

The issue with the page not appearing correctly on IE9 is currently being resolved

I am utilizing bootstrap alongside a bootswatch theme and HTML5 boilerplate to design a webpage. While it appears correctly on Chrome and Firefox, the display is off on IE9 and IE8 mode. However, everything works fine when compatibility mode is enabled in ...

csshtmltwitter-bootstrapinternet-explorer-9bootswatch

Automatically submit a PHP form if the input text box is left blank

I need a way to automatically refresh the data on my page when the textbox is empty. Manually submitting the form works perfectly, but I want it to happen automatically if the textbox is empty. The catch is that I don't want the form to submit while t ...

javascriptphphtmlforms

Creating a Functional Right Arrow on a Pure CSS Select Menu/Dropdown

I have implemented a custom select/dropdown menu by following the solution provided here: The functionality works well, but I am facing an issue where the dropdown options only appear when clicking on the box. Clicking on the 'arrow' located on ...

htmlcssdrop-down-menu

Using CSS to apply alternating colors to span elements within children

My DOM structure is generated by a JS framework and may appear like this: span:nth-child(odd) { background-color: lightblue; } span { display: block; } <div id="parent"> <div class="child"> <span>Some text to color in alte ...

htmlcss

Organize every rectangle and text element in D3 into distinct groups

Currently, I am working on creating a bar graph using d3.js. The goal is to display text on top of each bar when the user hovers over it. To achieve this, the <text> and <rect> elements need to be grouped inside a <g> element. For Exampl ...

javascripthtmld3.js

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

Converting a JavaScript object into HTML output

I have received the following JSON data: [    {       "fields": {          "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",          "track_name": "Lion City ",          "release_id": 560783,    ...

javascriptjqueryhtmljson