I added a margin-bottom to my Bootstrap card, but it only seems to affect the second row and not the first row. How can I make it work for both rows?
https://i.sstatic.net/fBfdK.png
This is the code I'm using:
.card{
position: absolute;
margin-top: 45px;
margin-bottom: 500px;
}
.img{
margin-top: 50px;
position: relative;
left: 90px;
top: -60px;
}
To create the desired layout, utilize the margin-top property within your .col-md-4 class. Adjust the width of the image to your preference.
Check out the demonstration below: (view the snippet in full-page mode to observe all six cards functioning)
img {
margin-top: -66px;
width: 75%;
}
.col-md-4 {
margin-top: 5em;
}
.img {
position: absolute;
margin-left: 8em;
z-index: 999999;
}
.row {
padding: 2em;
}<!-- Link the latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Incorporate the latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Graphic Designer</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Developer</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Front End Developer</h5>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
</div>
</div>
// Further card details...
</div>Currently, I have a working script that retrieves a complete address block to be inserted into a selected field. However, I am now attempting to remove unnecessary parts of the generated text block for better display. This is the code snippet: <script ...
Recently, I incorporated a CSS code to display an overlay when hovering over the thumbnails in my flexslider slideshow. However, after adding this code, I noticed that clicking on the thumbnail does not produce any action. .flex-control-nav li{ positi ...
I am facing an issue with integrating Google Reviews slider using Google API and owl carousel. The problem lies in the fact that the Google reviews data is appended last after the page has loaded completely. This causes the owl carousel function to be call ...
I am new to Angular 4 and encountering an issue with using *ngFor in conjunction with HTML drop-down select and option elements. My categories array-object looks like this - categories = [ { id:1, title: 'c/c++'}, { id:2, title: 'JavaScri ...
$(document).ready(function () { for (var n = 0; n < 3 ; n++) { $("body").append("<p id=\"element"+n+"\">Greetings, I am Element " + n + ".<p>"); } }); In the third line of code, which pairs of quotation marks match ...
Seeking assistance from the community here. Currently using Moodle version 3.8+, paired with the Lambda theme, I have a query to address. Specifically on the Profile Page, I aim to eliminate certain elements. Typically, I would apply additional CSS with ...
In the process of creating a user interface, I have included clickable cards that reveal a detailed panel when clicked. The detail panel is set to a minimum width of 900px and should adjust to the remaining space between the cards and itself. The column ...
I have a strong grasp of CSS and JS, utilizing jQuery for this particular project. The design includes a fluid grid made up of an unordered list with 'li' tags. Each tile has uniform width and height, adjusting to the browser window size by wrapp ...
As a complete beginner, I want to clarify that I may not be using the correct terminology in my question. I am embarking on creating an HTML5/Javascript application with Intel XDK to retrieve barcode information for video games from an online API. Specifi ...
I came across a similar question on Stack Overflow, but my situation is unique. After adding the Google Analytics script to my project (Angular4), I noticed that I am receiving all information except for browser information. Some browsers are showing &apo ...
Is there a way to apply horizontal margin while inheriting vertical margin without explicitly setting margin-left and margin-right? I was hoping for something like margin: inherit 20px; to be effective. Take a look at the example here: https://jsfiddle.ne ...
While utilizing the select feature from Material UI, I have a query: how can I receive an object (via the handleChange function) when a user clicks on the dropdown menu? In my handleChange function, I aim to obtain an object instead of just the 'name& ...
I've recently taken over the management of a website and I came across some unfamiliar CSS syntax. Has anyone encountered this type of syntax before? Can someone explain what the square brackets inside a style represent? Thank you, Rob .trigger-tx ...
I am currently creating some visual representations of journal issues. I am looking to showcase blocks of text using basic DIVs or other elements inside another DIV, mirroring the organization of the issue page. In order to achieve this, I need to positi ...
Is it possible to align a button with a textbox using the Bootstrap 4 layout system? https://i.sstatic.net/tN9II.png <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div ...
Whenever I try to use the jQuery validation plugin for validating a form within a Bootstrap modal, the validation does not work and the form cannot be submitted. This is the code for the Bootstrap modal form: <div class="modal fade" id="form-content" ...
<script> $(document).ready(function () { $("#fieldsetnew-addphone").click(function () { var addphonenoinfieldsetnew = $(document.createElement('div')) .addClass('fieldset1-inner-phoneno'); addpho ...
After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...
I am attempting to showcase the countries from each continent on a single page using buttons for each continent. When a user clicks on a button, I want the countries of the selected continent to be displayed. However, I am encountering an issue where only ...
I am currently facing an issue with my list display that fetches data from a database. The problem lies in the accordion feature not functioning properly when integrated into a JavaScript array, yet it works perfectly when directly inserted into HTML code. ...