Having trouble achieving the grid style in bootstrap

Can someone assist me in coding this design using Bootstrap 3? https://i.sstatic.net/ZBphd.png

Unfortunately, I am having trouble implementing it. Could someone help me out?

This is what I have tried so far:

    <div class="row">
    <div class="col-md-12">
    <h3 class="section-title">Browse Ads from 8 Categories</h3>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-1 wow fadeInUpQuick animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-users color-1"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Community</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Announcements</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Car Pool - Bike Ride</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Lost - Found</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Tender Notices</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">General Entertainment</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">View all subcategories →</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="category-box border-2 wow fadeInUpQuick animated" data-wow-delay="0.6s" style="visibility: visible;-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;">
    <div class="icon">
    <a href="category.html"><i class="lnr lnr-laptop-phone color-2"></i></a>
    </div>
    <div class="category-header">
    <a href="category.html"><h4>Electronics</h4></a>
    </div>
    <div class="category-content">
    <ul>
    <li>
    <a href="category.html">Home Electronics</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">LCDs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Mobile &amp; Tablets</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">TV &amp; DVDs</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Technical Services</a>
    <sapn class="category-counter">3</sapn>
    </li>
    <li>
    <a href="category.html">Others</a>
    <sapn class="category-counter">1</sapn>
    </li>
    </ul>
    </div>
    </div>
    </div>

htmlcsstwitter-bootstrap-3

Answer №1

Check out the code snippet below (view on JSFiddle:https://jsfiddle.net/apn4o32e/34/)

I implemented this using the panel component of Bootstrap 3, you can learn more about it here: https://www.w3schools.com/bootstrap/bootstrap_panels.asp

For the icons, I utilized font awesome 5, the icons can be found here: https://fontawesome.com

To create the icon section, I used :before pseudo-element with the panel

body{
 padding-left: 37px;
 padding-top:50px
}
.panel.panel-default{
  margin:0;
  padding:0;
  border-bottom-color:red;
  border-bottom-width:3px;
  width: 350px;
}
.panel-heading{
  padding-top: 30px!important;
  text-align:center;
  height: 90px;
}
.panel-heading:before{
    box-shadow: 2px 5px #c1d7d7;
    padding-top: 20px;
    width: 60px;
    height: 60px;
    position: absolute;
    background-color: red;
    content: '\f0c0';
    font-weight: 900;
    top: -34px;
    left: 138px;
    font-family: 'Font Awesome 5 Free';
}
span{float: right;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="conteiner">
<div class="row">

    <div class="panel panel-default col-md-3 col-sm-6 col-xs-12">
              
          <div class="panel-heading">
      
          <h4>Community</h4>
          </div>
   <div class="panel-body">
              <div class="list-group">
                 <ul>
    <li>
    <a href="category.html">Announcements</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Car Pool - Bike Ride</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Charity - Donate - NGO</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Lost - Found</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">Tender Notices</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">General Entertainment</a>
    <span class="category-counter">3</span >
    </li>
    <li>
    <a href="category.html">View all subcategories →</a>
    </li>
    </ul>
              </div>
            </div>
   </div>
      </div>
</div>

Answer №2

I implemented the following CSS styles and added a container-fluid div (necessary when using rows). I also corrected a typo where span was mistakenly written as sapn.

.row {
  display: flex;
  flex-wrap: wrap;
}

.category-box {
  box-shadow: 3px 1px 3px #aaa, 3px -2px 3px #aaa, -1px -2px 3px #aaa;
  height: 100%;
  position: relative;
  border-bottom: 2px solid red;
}

.icon {
  position: absolute;
  top: -25px;
  font-size: 24px;
  padding: 6px 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: aquamarine;
  box-shadow: 3px 3px 1px #aaa;
}

.category-header {
  padding: 20px 10px;
  text-align: center;
  background-color: #dedbdb;
}

.col-md-3.col-sm-6.col-xs-12 {
  margin-bottom: 45px;
}

.category-content {
  padding: 15px;
}

.category-content ul {
  padding: 0;
}

.category-content li {
  display: flex;
}

.category-content li span {
  margin-left: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>
<div class="container-fluid">
  <h3 class="section-title">Browse Ads from 8 Categories</h3>
  <div class="row">

    ... (omitted for brevity)

  </div>
</div>

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

js.clickElement(element);

<li class="tree-node"> <div id="WLOBJ_mmuX_left_row_0e6d" class="default-row, no-border-row" style="height:22px"> <table class="default-row, no-border-row" cellspacing="0" cellpadding="0" border="0" style="width:100%;height:22;"& ...

htmlseleniumxpathselenium-webdriverautomation

What issues are present in this PHP code?

Can you identify the issue in this PHP code? I am using Netbeans 8.1 and whenever I type $ _GET, an error occurs <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...

phphtml

Wrapping up CSS code within a JavaScript plugin

I am in the process of developing a JavaScript plugin that will be integrated into various websites with different styles. Some use Bootstrap, others Bulma, and some have custom styling. My plugin creates DOM elements such as divs, inputs, selects. I pref ...

css

Dynamically add Select2 with a specific class name: tips and tricks

I need help adding a new row with a select2 instance using a class name. The new row is created with the select dropdown, but I am unable to click on it for some reason. var maxGroup = 10; //add more fields group $(".addMor ...

javascripthtmljquery-select2

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

javascripthtmlangularangular-pipe

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

The positioning and floating of two divs are set to fixed without using percentage width, however, the functionality is not

Apologies for my poor English writing :) I am attempting to float two divs side by side in a fixed position, without using percentages. This code works well on most browsers but is not compatible with IE 6. HTML <div class="right"></div> < ...

cssinternet-explorer-6

What steps are involved in creating a personalized function for WooCommerce WordPress?

Looking to create a personalized function for WooCommerce that will accept an array as input and display specific products based on the provided tags. The array will consist of product tags from WooCommerce. <form id="form3" method="POST& ...

javascriptphphtmlwordpresswoocommerce

Achieving True Nested Divs: Making Children Truly Inside

I want to create nested divs for positioning children with top and left properties, allowing them to overlap each other: https://jsfiddle.net/e0cpuarv/ .boo { position: absolute; left: 10px; top: 10px; width: 100px ...

htmlcss

Blend Material-UI with other frameworks such as Foundation to create a unique design aesthetic

I've been pondering something for quite some time but haven't been able to find an answer. Let's consider the following scenario: You're working on building a dynamic website with React and you need to choose a front-end framework. In ...

cssreactjswebpackzurb-foundationmaterial-ui

JavaScript array with more than 4 elements

I am working on a program where I have created an array and now want to display all the words that contain more than 4 letters. Check out my code snippet below: function oppC(){ var ord = ["Apple", "Two", "Yesterday", "mother", "lol", "car", "co ...

javascripthtmlcssarrays

The visibility of overflow-y does not seem to be working properly when overflow-x is

https://i.sstatic.net/hihjC.png .iati-list-table { overflow-x: auto; overflow-y: visible; } When I apply overflow-visible, a scroll bar appears. But when I use overflowy-hidden, the tooltip is cropped. How can I set it so that overflow x is auto a ...

cssvue.js

Playground Themed Central Menu Features

Check out the theme live preview here: I've been experimenting with different combinations of text-align: center; and margin: 0 auto; but I'm struggling to align the menu elements to the center of the page. Any assistance would be highly apprec ...

htmlcsswordpress

What steps should I take to ensure that the buttons on my restaurant website are correctly displaying the overlays?

I'm currently facing an issue with the functionality of the buttons on my React.js-powered restaurant website. These buttons are located within a component called MenuButtons.jsx and are situated at the bottom of a shorter menu section on the homepage ...

javascriptcssreactjsjsx

What is preventing the ng-change from being triggered in this Angular JS test?

Looking to experiment with Angular JS so that every time I update a text input, the corresponding model object is logged to the console. Here's the markup I have: It's contained within a div with the attribute ng-controller="datosPersonalesCont ...

javascripthtmlangularjs

Is it possible to change cases within a switch statement after one case condition has been satisfied?

I am currently working on implementing a game that involves rolling dice in Javascript/jQuery. The game has different "Phases" that the player must complete one by one without any interference from previous phases. The goal is to smoothly transition betw ...

javascriptjqueryhtml

Ways to stop a ngFor loop in TypeScript

I'm currently working on a Hybrid app using Ionic-3. I have a function in my Typescript file that is being called from the Html, but it seems like the function is being executed multiple times causing my browser and application to hang. Below are the ...

htmlangulartypescriptionic3

Ways to distinguish between two labels having the same "for" attribute?

My HTML code is as follows: <label class="my-class" for="_something">Text Number 1</label> <label class="my-class" for="_something">Number 2 Text</label> I have two labels with the same class and identical "for" attributes. I am ...

csscss-selectors

Graphics distorting on android devices when implementing createjs and canvas technology

I have a question regarding the performance of my game that I'm developing to work on both desktop browsers and mobile devices. Using HTML5 and CreateJs, most of the game is being drawn on a canvas element. While everything runs smoothly on a standar ...

androidhtmlcordovahtml5-canvascreatejs

Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...

htmlioscss