Content enclosed in a div tag and displayed within the same

I need assistance in converting a PSD file into two cards. The content within the card should resemble this. Can anyone provide guidance on how to achieve this?

Below is the code I am currently working with:

.container {
 margin-top: 10px;
}

.card {
   display: flex; 
   justify-content: center;
   align-items: center
}
<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

javascripthtmlcssbootstrap-4

Answer №1

According to @Dominik, if you are utilizing bootstrap-4, you have the option to apply bootstrap classes

/* SOLELY FOR SPACE USAGE */

.container {
    margin-top: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="container">
    <div class="col-lg-12">
        <div class="row m-0">
            <div class="col">
                <div class="card height-2 d-flex flex-row align-items-center p-3" style="border-top:4px solid #515151;">
                  <i class="material-icons" style="color:#515151;">gavel  </i>
                    <h5 class="pl-5 m-0">Legislation</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2 d-flex flex-row align-items-center p-3"  style="border-top:4px solid #9b9b60;">
                    <i class="material-icons" style="color:#9b9b60;">today</i>
                    <h5 class="pl-5 m-0">Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

For those utilizing Bootstrap version 4 or higher, the d-flex, justify-content-*, and align-items-* classes can be employed within the row element.

.container {
 margin-top: 10px;
}

.card {
   display: flex; 
   justify-content: center;
   align-items: center
}
<div class="container">
    <div class="col-lg-12">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislation</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Answer №3

I trust you are anticipating something like this:

.container {
 margin-top: 10px;
}
.card.height-2 h5{
padding-left:40px;
}
.card {
   display: flex; 
   padding: 20px;
   align-items: center;
   flex-direction: row !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <div class="col">
                <div class="card height-2" style="border-top:4px solid #515151;">
                  <i class="material-icons" style="color:#515151;">gavel  </i>
                    <h5>Legislation</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2"  style="border-top:4px solid #9b9b60;">
                    <i class="material-icons" style="color:#9b9b60;">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </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

Merge two arrays based on date and sort them using Angular.js/JavaScript

I am facing a challenge where I have two JSON arrays, each containing a field named date. My goal is to compare the two arrays and merge them into a single array. Check out the code snippet below: var firstArr=[{'name':'Ram','date ...

javascriptarraysangularjs

Authenticate the refresh token and access token by utilizing JWT

I find myself in a unique situation where I do not currently possess any database. However, I have created a simple server.js file through which I send my requests (by running server.js using node server.js). My goal is to add user-login functionality to m ...

javascriptnode.jsjsonserverbackend

What's the best way to group rows in an angular mat-table?

I am working on a detailed mat-table with expanded rows and trying to group the rows based on Execution Date. While looking at this Stackblitz example where the data is grouped alphabetically, I am struggling to understand where to place the group header c ...

javascripthtmlangulartypescriptangular-material

Tips for stopping execution in Discord.js if the user no longer exists?

I'm currently working on a discord bot and encountered a minor issue. I am using "messageReactionRemove" and "messageReactionAdd" to manage certain roles by removing or adding them, but the problem arises when a user leaves the server. When this happe ...

javascriptnode.jsdiscord.js

Ways to initiate a CSS transition without hovering over it

Currently, I have a sidebar that is hidden and only shows up when the mouse hovers over it. I'm wondering how I can make the CSS transition trigger before the mouse hover, similar to what happens in this sidebar link: . Any advice on how to achieve th ...

csshovercss-transitions

JavaScript code to convert a query into an array

Is there a way to search through a JavaScript array to find all names that start with the letter A? If so, how can I display all of the information associated with those names? Name":"Albert","age":"14" Name":"Alison","age":"14" Here is my JSON array: ...

javascriptjqueryarraysjson

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Currently, in my VueJS v-data-table setup, I am facing a challenge with custom sorting functions. The table has both numeric and string columns, with some null values scattered throughout. My goal is to sort the data by placing null values at the end of ea ...

javascriptvue.jssortingvuetify.js

How to create multiple open dropdown menus in Bootstrap 4 navbar without using the toggle

Currently, I am utilizing Bootstrap 4 along with a multi-level vertical sidebar menu. An issue that I am facing is that when a dropdown item is clicked, the previously opened dropdown automatically closes. However, I would like to allow users to keep multi ...

jquerybootstrap-4

Enhancing Array values within a Hashmap in JavaScript: Tips for Adding more Items

Is there a 'bar' key in the hashmap that has an array as its value with only one item ['foo']? I want to add another item, 'foo1', to the same array. Is the following code the right approach, or is there a simpler way to achie ...

javascript

AngularJS ngAnimate triggering prematurely

In the current setup, p2 animates in while p1 is still animating out. After that, p1 disappears and p2 glitches up the page. The desired effect is for 1 to fade out and then have 2 fade in. html: <nav> <a ng-click="changeView('p1' ...

javascriptangularjs

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode. In an example I have provided, if you click on the button "Reb ...

javascriptjqueryhtmlknockout.js

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

I am having trouble with my jquery animation scrollTop function. Whenever I click on <a>, it takes me to the anchor without any animation. Can someone please provide a solution for this issue? Upon running the webpage, I encountered an error message ...

javascriptjqueryhtml

Guide to utilizing the bootstrap grid system to stack below a width of 480px

I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack ...

csstwitter-bootstrap

The getElementById method in JavaScript can result in a null return value

Why is null returned by the getElementById method in JavaScript? <html> <head> <title>test_elementObject</title> <script language="JavaScript" type="text/javascript"> <!-- var input1 = document.getElementById ( " ...

javascript

Changing the structure of a JSON array in JavaScript

I'm currently developing an ExpressJS application and I need to send a post request to a URL. My data is being retrieved from a MS SQL database table using Sequelize, and the format looks like this: [ { "x":"data1", "y":& ...

javascriptnode.jsjsonexpress

What is the best way to obtain the accurate innerHeight of a div on the initial attempt

Within my webpage, there is a hidden sub navigation with its height initially set to 0. This sub navigation contains various sections of sub navs. When a section is clicked, I obtain the name of that section and then retrieve the innerHeight of the corres ...

javascriptjqueryangularjsanimation

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

What is causing my ReactJS web application to not recognize the cookies being sent by the backend server?

I have a web application with a frontend built in ReactJS and a backend built in HapiJS. The backend is running on http://localhost:3000 and the frontend on http://localhost:1234. My goal is to implement authentication using cookies. I am using Axios in m ...

javascriptnode.jsreactjscookies

Show additional information when a row in the Bootstrap Vue table is clicked

I am attempting to create a unique user experience by displaying row details when a row is clicked, rather than clicking on a button as described in the documentation. However, the documentation lacks specific instructions on how to implement this feature. ...

javascriptvue.jsbootstrap-vue

Link several jQuery elements to a function simultaneously

Having 3 jQuery objects is my current situation: var first = $('.el1'); var second = $('.el2'); var third = $('.el3'); I am trying to attach a "change" event to all of them simultaneously, but facing some challenges :( $(fi ...

javascriptjqueryjquery-selectors