Here's a scenario where Two divs are dynamically styled from the Database.
I am attempting to align two divs in the layout shown here:
https://i.stack.imgur.com/nYI7v.png
Can this be achieved using Bootstrap's CSS class col-?
In responsive mode, they should appear like this in Tablet mode:
https://i.stack.imgur.com/oKsy8.png
Note: 1. I aim to mostly use CSS for this.
2. Div 1 & Div 2 are within a single Div
Decided to provide an updated answer for you.
Utilizing Flexbox is a fantastic way to arrange and position elements. Below is an example created with flexbox that fits your requirements. Some adjustments may be needed to fine-tune it, but this should give you a good starting point:
aside {
background: yellow;
}
main {
background: blue;
}
footer {
background: pink;
}
.container {
display: flex;
flex-wrap: wrap;
}
footer {
flex-basis: 100%;
}
aside {
flex-basis: 300px;
}
main {
flex: 1;
}<div class="container">
<aside>
some text here
</aside>
<main>
more text here
</main>
<footer>
footer text
</footer>
</div>Flexbox is widely supported on all browsers now, making it a reliable choice for layout design. I personally use it frequently in my projects. For more insights on what you can achieve with Flexbox, check out this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
UPDATE: To see which features work on various browsers, you can visit: http://caniuse.com/#search=flexbox
An effective solution is to utilize CSS flexbox, which allows for easy manipulation of the order and layout of displayed elements.
.container-div {
display: flex;
flex-direction: column;
}
.item-div-1 {
order: 1;
...
}
.item-div-2 {
order: 3;
...
}
.item-div-3 {
order: 2;
...
}
For more in-depth information on specific flexbox properties, you can refer to CSS-Tricks: A guide to flexbox. Just keep in mind to ensure browser compatibility, as there may be lack of support in I.E.-8 and earlier versions.
I have updated the answer with a new class and additional CSS styling.
CSS
@media (max-width: 1027px) {
.div1 {
margin-right: 2px;
}
}
HTML
<div class="container-fluid">
<p>Resize your browser window to observe the effect.</p>
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 div1" style="background-color:lavender;">Content of div 1</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 div3" style="background-color:lavenderblush;">Content of div 3</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 div2" style="background-color:lavender;">Content of div 2</div>
</div>
</div>
I want to create two dropdown menus using Bootstrap v3 that are displayed side by side with a specific width and utilizing the grid system. However, I am facing an issue where the width remains the same. Here is an example of what I mean: .menuList > ...
Check out this codepen link: http://codepen.io/muji/pen/XpEYzO I am looking to target the first element after it has been sorted using a CSS "order" property and apply another CSS property to it. Is there a way to use jQuery or any other method to identi ...
Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...
How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...
Trying to extract specific fields from a JSON string and display them on an HTML page, but encountering the following error: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data This is the JSON being sent: { "Order0& ...
My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...
I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...
After installing WAMP Developer Pro on my Windows 7 computer, a testing website was set up locally. Now, I am trying to test it on the LAN, but when accessing the page, only text appears without any images, themes, or styling. Apache is running on port 80 ...
I have noticed some unusual behavior on my website page. My website design can be viewed at Also, here is the same design in CMS format Please pay attention to the section under <div class="godelpage"> <a href="http://ryugaku.babonmultimedia ...
My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...
I'm attempting to incorporate this functionality into my Angular project ( link ), but I'm facing challenges with styling it using CSS. Could this be due to limitations in overriding the default settings? I came across this helpful resource: sour ...
I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach. Below is the code I hav ...
It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...
CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...
I had been using the styles.css file with this body stanza: body { font: 18px Helvetica, sans-serif, Arial; color: #ffffff; background: url("../images/bg.jpg") center top repeat-x; background-size: cover; line-height: 20px ...
I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...
Is there a way to properly escape the & (ampersand) in a URL using jQuery? I have attempted the following methods: .replace("/&/g", "&") .replace("/&/g", "%26") .replace("/&/g", "\&") Unfortunately, none of these are y ...
I am currently working on a project in VB that involves retrieving elements by tag names, similar to what I used to do in VBA. However, I am facing challenges as my code seems to freeze after opening a new browser window. Public ie As New SHDocVw.Intern ...
Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...
In my current project, I am utilizing Angular 13, Bootstrap 5, and ngx-bootstrap-fix-datepicker version 5. "bootstrap": "^5.1.3", "ngx-bootstrap": "^8.0.0", "ngx-bootstrap-fix-datepicker": "^5.6.8" ...