I using Bootstrap 3 and im trying to reorder the columns position in mobile and tablet.
How is this possible?
this is my code:
<div class="row main-row">
<div class="col-md-6">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
</div>
<div class="col-md-6">
</div>
</div>
I want to Bootstrap to show
Text
Image
Text
Image
Right now it shows
Image
Text
Text
Image
Is there a way to handle this?
What it looks like right now
Can use flex in the mobile version.
.main-row {
display: flex;
flex-flow: column;
}
.main-row .col-md-6 {
display: flex;
order: 1;
}
.main-row .col-md-6 +.col-md-6 {
display: flex;
order: 0;
}
<div class="row main-row">
<div class="col-md-6">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
</div>
<div class="col-md-6">
IMGES
</div>
</div>
Unfortunately in Bootstrap 3 you cannot change the order of columns in smaller screens but you can do that in large screens. In Bootstrap 4 you can now change the order of columns in smaller screens. Below you can see one way of doing this.
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
Related
There is an area with equally sized grids. I cannot change the html code anymore but my client wants me to have the middle grid in a different size, so he wants something like col-md-3 col-md-6 col-md-3. Is there anyway to do it through css?
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
You can do this in different ways and the approach depends on how you want the elements renders. I will assume you want to display the three elements on a single row for desktop and on mobile.
For Bootstrap 3 use
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
This will force the 3 divs to appear on same row for both desktop and mobile. For Bootstrap 4 use you can do the same thing like below.
<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-3"></div>
If you are not using bootstrap, you can use the following Flex css property.
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col1"></div>
</div>
<style>
.row {
width: 100%;
display: flex;
flex-direction: row;
}
.col {
width: 25%;
height: 100px;
background: #ccc;
text-align: center;
}
.col2 {
width: 50%;
height: 100px;
text-align: center;
background: #666;
}
</style>
You can take a look at the solution on this link: https://codepen.io/sirwhite/pen/arXoXG
You can also do this using css grid. checkout the https://www.w3schools.com/css/css_grid.asp
You can add here an extra parent class to all columns, without editing the columns the new suggested layout can be achieved by using simple CSS only.
#media (min-width: 1200px) {
.cstm-col .col-md-3 {
width: 25%;
}
.cstm-col .col-md-6 {
width: 50%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Default Bootstrap Grid</h3>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<h4>.col-md-4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
</div>
<style>
#media (min-width: 1200px) {
.cstm-col .col-md-3 {
width: 25%;
}
.cstm-col .col-md-6 {
width: 50%;
}
}
</style>
<h3>Custom Bootstrap Grid</h3>
<div class="row cstm-col">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
<h4>.col-md-3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
<h4>.col-md-6</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-4">
<h4>.col-md-3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit pariatur unde, odio voluptatibus exercitationem quisquam mollitia deserunt necessitatibus esse sunt nostrum eaque consectetur assumenda, dolor ab officiis minima ad!</p>
</div>
</div>
Basically, we must have this layout where in an image must spill out of the container and the text fills in the space created by the image (that is offset to the left).
We currently have this structure:
<div class="container">
<div class="row">
<div class="col">
Some paragraph
</div>
<div class="row">
<div class="col-5 body-img-col">
<div class="body-img-wrap">
<img src="images/some-image.jpg" alt="" />
</div>
</div>
<div class="col-7">
Some paragraph
</div>
</div>
<div class="col">
Some paragraph
</div>
</div>
</div>
Where body-img-wrap img is set to margin-left: -100px;. However, there's a gap that the image creates and the text won't fill it in as it's not in the same column. What we need is for the text to fill in the gap that the image creates when it's offset to the left.
How do we achieve this kind of layout?
Here is my solution,
I divided the image and text into 2 section, Then I gave the width to the text-section equal to width of the image using
width: calc(100% - 200px);
.left-sec {
width: 200px;
height: auto;
}
.right-sec {
width: calc(100% - 200px);
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
</div>
<div class="row">
<img class="left-sec" src="https://placehold.it/200x200" alt="" />
<div class="right-sec">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
</div>
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
</div>
</div>
</div>
</div>
Just started creating a website in WordPress with Bootstrap 4 and I've been puzzling on an issue for days now.
I'm trying to vertically align read more buttons for a 'related posts' section on a website. I want to have the read more button automatically aligned to the longest caption text. I've tried multiple ways with relative/absolute, but I can't seem to get it to work.
Here is my current code:
<div class="row">
<?php $cat = new WP_Query( 'cat=6&posts_per_page=3' ); ?>
<?php while($cat->have_posts()) : $cat->the_post(); ?>
<div class="col-xs-12 col-md-4 readmore">
<img class="w-100" src="<?php the_post_thumbnail_url(); ?>">
<div class="col-12" style="margin-top:15px;">
<h2 class="h6 text-uppercase text-center text-nowrap"><strong><?php the_title(); ?></strong></h2>
<p><?php the_content(); ?></p>
<p><?php //the_excerpt(); ?></p>
</div>
<div class="col-6 mx-auto" style="bottom: 10px;margin-bottom: 20px">
Read More
</div>
</div>
<?php endwhile; ?>
</div>
<?php wp_reset_postdata(); ?>
And this is how it look currently:
The thing that makes the even more difficult is that ideally it should still be responsive. So on a smaller screen the buttons should be directly after the caption, like this:
Hopefully it's clear what the problem is and hopefully someone can share their thoughts. Thanks in advance!
You don't need all child elements to initially be the same height. You can use flexbox to achieve the desired results you are looking for.
Here is a link to a codepen that shows the solution and there is an explanation below.
https://codepen.io/sugarbuzzdesigns/pen/ZjwQZb
Create a container that will contain all of your posts. This should be set to display: flex. Set the flex direction to column so we can set it to row on larger screens with a media query.
Create containers for each post. These posts are the flex items in the container we just created
Wrap your image, title, and content in one div so it can be evenly spaced separately from the read more button
Now you can set each post to flex: 1 so they take up equal space. Next you can set each post to flex-direction: column and justify-content: space-between.
HTML
<div class="container">
<div class="blog-post">
<div>
<h3>Heading Here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis expedita laudantium ut earum sint, numquam adipisci autem cupiditate dolorem aspernatur illo laboriosam, dolores quis? Perspiciatis debitis nesciunt corporis dicta eveniet!<p>
</div>
Read More
</div>
<div class="blog-post">
<div>
<h3>Heading Here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae.<p>
</div>
Read More
</div>
<div class="blog-post">
<div>
<h3>Heading Here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit.<p>
</div>
Read More
</div>
</div>
CSS
.container {
display: flex;
}
#media (min-width: 600px) {
.container {
flex-direction: row;
}
}
.blog-post {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
}
You will need to specify a div where all child elements are of equal height. I believe there are some features for responsive design too. Check this article out:
How do I keep two side-by-side divs the same height?
The top comment under the answer suggests: If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.
I will run some testing for you now and post the code snippet
There are a lot of examples for how to have a fixed width sidebar on Bootstrap 4, but I haven't found one that will cause the main content to disappear on mobile.
I've tried the following:
<div class="row no-gutters flex-nowrap">
<div class="col-md col-12 d-none d-xs-block d-sm-block ">
Main area
</div>
<div class="col-md-4 col-12 sidebar">
Sidebar
</div>
</div>
.sidebar {
max-width: 600px; min-width: 600px
}
And this mostly works, but what happens is that between 768 to 576 pixels the sidebar disappears entirely.
What I'm after is for the sidebar to be a fixed width with the main area shrinking and eventually disappearing.
With few lines of CSS you can achieve this with Flexbox. Please have a look in snippet I added with this answer.
To know more about Flexbox you can checkout those links.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
min-width: 150px;
max-width: 150px;
height: 100%;
background: grey;
padding: 20px;
}
.content {
padding: 20px;
height: 100%;
background: lightgrey;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
</div>
</div>
I believe you're looking for this:
#media (min-width:768px) {
.sidebar {
max-width: 600px; min-width: 600px;
}
}
.sidebar {
background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters flex-nowrap">
<div class="col d-none d-md-block">
Main area
</div>
<div class="col sidebar">
Sidebar
</div>
</div>
I wrapped the fixed size rule in a #media query condition only applying on md and up and I revised classes applied to columns accordingly.
Since you're setting the custom width of your sidebar anyway, you don't need col-* classes on your columns.
I've this example code:
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">text article</div>
</div>
</div>
the left-block class have a background-color, but the background stop by height menu, but i like backgroud continued and stop end page, but example if insert in left-block padding-bottom=100% tha height left-block increase height by class="row" and class text-various, I like the padding stop height row or height text-various
help me please
As I understand you need something like this:
.row {
display: flex;
}
.left-block {
color: #fff;
padding: 8px;
}
.text {
padding-left: 8px;
}
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore.
</div>
</div>
</div>