I have three div elements each with 33% width.
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
Is it possible to style the third div so that it does not align with the other two? I would like the first two divs to be in a row and the third div at the bottom using CSS properties. How can this be achieved?
To make the third div appear on the next line, or the "bottom side", simply set its display property to block, as shown below:
.col-md-4 {
display:inline-block;
width:33%;
height:100px;
background-color:red;
}
.block {
display:block;
}<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4 block">3</div>
</div>If this solution doesn't meet your requirements, please provide more details in your question.
Here's a straightforward solution where I utilize CSS Grid in the provided snippet.
Below is the HTML code:
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
And here is the corresponding CSS code:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.container .section:last-child {
grid-column: 1/3;
}
your solution:
<div class="row">
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4">a</div>
</div>
result:
<div class="row">
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4" style="display: inline-block;">a</div>
<div class="col-md-4">a</div>
</div>
If you're looking to experiment with CSS, give this a shot
.col-md-4{
width:33.33%;
display:inline-block;
}
.col-md-4:nth-of-type(3){
display:block;
}
Your code:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
</div>
Solution:
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">a</div>
<div class="col-md-5">a</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-6 text-center"> Column 1 </div>
<div class="col-6 text-center"> Column 2 </div>
<div class="col-12 text-center"> Column 3 </div>
</div><div class="line">
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:inline-block;" class="col-md-4">a</div>
<div style="display:block;" class="col-md-4"></div>
</div>
Assign the inline-block display style to the first two divs and block display style to the third one.
Check out this JSFiddle demonstration
Give this a try.
<style>
.col-md-4{
width: 120px;
height: 120px;
background-color: wheat;
border : 2px solid black;
}
</style>
<div class="row">
<div class="col-md-4">b</div>
<div class="col-md-4">b</div>
<div class="col-md-4">b</div>
</div>
If you're utilizing bootstrap, it's a breeze to accomplish this by simply going beyond the 12 cols for a row principle.
Simply include col-md-12 to your final div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1F" crossorigin="anonymous">
<div class="row">
<div class="col-4">a1</div>
<div class="col-4">a2</div>
<div class="col-12">a3</div>
</div>HTML: <div id="videos"> <a href="javascript:loadAndPlayVideo('QXoIMTjk9Xg')"><img src="http://i.ytimg.com/vi/QXoIMTjk9Xg/default.jpg" id="thumb_QXoIMTjk9Xg"></a> <a href="javascript:loadAndPlayVideo('nWubf ...
I have successfully created a Chat Room using PHP, but I am facing an issue where only the messages are being displayed without the corresponding usernames. Separate databases for usernames and messages have been set up, yet the usernames are not appearing ...
Trying to integrate AJAX and jQuery into my code has been a challenge. Whenever the form is submitted, it redirects me to the PHP page in the action attribute. I'm not sure why this keeps happening, and I've been struggling to figure it out. The ...
I am having an issue with the width of my footer when using a Bootstrap 4 "Container". The Container does not cover the entire bottom of the screen as expected. Even changing it to Container-Fluid does not resolve the issue. For reference, here is a JSFid ...
On my webpage, there is an image that I want to be able to replace by clicking on it and selecting a new image from the file uploader without showing the upload button. Once the new image is uploaded, I'd like it to replace the current image, and for ...
My current setup includes a search box and a button that users click to execute the search. However, I am looking to enhance the functionality by allowing users to press "enter" instead of clicking the search button. How can I achieve this modification? B ...
I am working with a canvas that contains multiple div elements representing different sections of the canvas. However, when I capture these sections, they do not appear exactly as displayed on the screen. How can I track and accurately capture the div area ...
Is there a way to split my screen into four sections with equal width and height using bootstrap 4 and flexbox? Each section should occupy 50% of the screen's width and height. Additionally, I need these sections to be responsive in terms of their c ...
I am currently working on an Angular 6 project where I have a form and a table that retrieves data from a web API. I want to know if it's possible to send the form data to that web API. Here is the code snippet that I have so far: HTML Form: &l ...
Using the XPath 1.0 expression //*[text()] does not capture the phrase "now revenue of kfc is" https://i.stack.imgur.com/GeFCY.png However, with the XPath 2.0 expression //text(), it can be selected. https://i.stack.imgur.com/uTSqW.png Unfortunately, S ...
I need to display 3 tables, each with a width of 300px, on a webpage. These tables can be collapsed or visible. My goal is to arrange them so that if only one table is visible, it appears in the center of the page (centrally aligned). Additionally, the tab ...
Having trouble with overlapping label and input letters in my React form. Looking for: The appearance shown in the top image Experiencing: What is displayed in the bottom image Any solutions on how to resolve this issue? https://i.sstatic.net/Y3W2m.png ...
Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...
Check out the images below: http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (Design view) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (Live & browser view) In the design view, everything appears as intended and looks great. However, i ...
Currently, I have vuetify 1.5.x set up on my codepen. Upon reviewing my codepen, I noticed that the line displayed on the autocomplete feature appears to be quite thick. My goal is to have that line be only 1px. For the select field (outline border), I int ...
Curious about creating a website that allows users to log in and participate in competitions against each other. Any tips on where to start or recommendations for existing frameworks would be greatly appreciated. Appreciate your help in advance! ...
After browsing through similar questions, I couldn't find a solution that fits my needs. Basically, I have a website where a random emoji is generated and stored in local storage. However, this method is not effective as users can easily delete their ...
So I have a CSS style in my .css class where the color is set to blue for hundreds of buttons. But now, my customer wants an option for green buttons which will be saved by a database field. So I check the field like this: if (!String.Is ...
My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...
Can anyone assist me with centering the contents of my h1 tag? h1{ width: 100%; vertical-align: middle; color: rgb(5, 5, 5); font-size:25px; letter-spacing: 0px; top: 0; text-align: left; padding: 10; }h1:after { content:' '; display: ...