Ive been struggling for the past day on this issue, if someone can help me I would be thankful !
I am trying to do something like this with bootstrap 5.
goal I am trying to achieve
I know how to do the form, centre the logo and all, but I'm not able to split the page into two vertical section, I want to use bg-dark on the left and bg-secondary on the right.
Here's what I have for now:
<div class="container">
<div class="row">
<div class="col-4 bg-dark p-0">
<img src="/img/FOODIGO.svg" alt="">
</div>
<div class="col-8 bg-secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
</div>
</div>
thank you for your help !
this should do the trick.
for more info you can read up here: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" style="height:100vh;">
<div class="col-sm-4 bg-dark p-0">
<img src="/img/FOODIGO.svg" alt="">
</div>
<div class="col-sm-8 bg-secondary" style="height:100vh;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
</div>
</div>
I have updated the answer to include your initial code. this will allow your section to also be responsive as well.
Basically by adding -fluid to your container we stretch the container 100% the width of the parent container.
Hope this helps.
Related
I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using class="container". Any tips? Code below. I also added an image of how it looks when I inspect.
<h1> (SPH) </h1>
<div class="row">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
As mentioned in the comments.
You can use a class at the top of your page like : container.
Example:
<div class= container justify-content-center> /your code here/ </div>
The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center"> (SPH) </h1>
<div class="row justify-content-center">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
</div>
I started with bootstrap and try to create a row with 2 columns. The column right is split up into 2 rows. I try to use "space-around" to get a nicer layout for the column right (vertically), however, it does not work. The two rows are centered instead. Anyone knows why not? btw: the image itself is larger than the 2 rows in the right column.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid px-0">
<div class="row">
<div class=" col-6">
<img class="img-fluid" src="pictures/Eriko.jpg" alt="">
</div>
<div class="col-6 bg-info">
<div class="row h-100 align-content-around">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-8 text-center bg-danger">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
<div class="row justify-content-center">
<div class="col-8 text-center bg-primary">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
</div>
</div>
</div>
</div>
</section>
screenshot of current result
I'm currently facing trouble when making layout. In the below picture, i want to make the content columns on the right ( title,lorem...) scale to fit height of the image on the left. How can I do it?
I'm using Bootstrap v5.1.1
Current image:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 black h-100">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
</div>
</div>
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
Use Bootstrap's flex grid (which is the default) rather than setting column sizes.
Use the col-auto class on your image column to make it collapse to the image's width.
Don't set inline sizing on your grid or your content. Inline styles make development and maintenance more difficult. Use a class for your image if you like, with a semantic name so you can change the size value for a redesign without the name becoming wrong.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
.size-medium {
width: 200px;
}
</style>
<div class="container">
<div class="row">
<div class="col col-auto">
<div class="col-md-4 black h-100">
<img class="size-medium" src="https://via.placeholder.com/300" alt="">
</div>
</div>
<div class="col">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
</div>
you put the class col-md-4 to the wrong tag
<div class="row">
<img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
All i want to do is have a large block of text on the right hand side of an image. Its driving me crazy. The column containing text drops below the image as soon as the text becomes a certain size or is not given a width, one solution is to add a width to the text column, but isnt the point of bootstrap to not use fixed widths!?
All i have on the css of P is word-wrap: break-word; I have added a height on the image as else its too large - would like to restrict the size of the image to the size of the bootstrap column if that is also possible. I have tried all various css combinations. Sorry, this is probably a regular question, i have seen many answers to this, and tried all of them out. How do i create two columns in a row, one with an image and one with text?! This should be simple! (and probably is!). Thank you and sorry.
nb i am in a laravel project, with bootstrap loaded and the css available.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img src="{{ asset('images/fun.jpeg') }}" alt="Picture" height="400em" >
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
I added img-fluid class for the image to be responsive. img-fluid class doing image width: 100% and height: auto. Thus, the image moves responsively according to the container it is in.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u">
<div class="container">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="Picture" height="400em">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
You are doing everything right but not including width="100%" in your img tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img width="100%" src="https://images.unsplash.com/photo-1590412513773-fa30db27b485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>
My agenda is to show an image and Details side by side in laptop and in responsive show them individually.. It works in non-responsive page showing the details side by side with col-md-6, but the code doesnt accept col-sm-12 for showing the details induvidually in responsive state
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Use img-fluid to image(see Fiddle:https://jsfiddle.net/gpLyvr5w/6/)
Learn here:https://getbootstrap.com/docs/4.0/content/images/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
well the code class="col-md-6 col-sm-12 padding-0" means that at screen ≥576px the element should take full width (aka width:100%) of available width but if the screen is ≥768px then the element should take half the available width (aka width:50%).
So if you need your div containing image and div with details to be side by side on screens ≥768px (usually tablets in portrait mode) then simply use col-md-6 you don't need to specify col-sm-12 as by default div elements are block level elements and take full width of available space.
Also you don't need padding-0 class you can use Bootstrap 4's spacing classes such as p-0, p-1, p-3, pt-1, py-3 etc. to remove or add padding so your final classes should look like this:
class="col-md-6 p-0"
You Need to give the extra class in first col-md-6 i have given class name res and write a media query for that like these
<style>
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.res{
min-width:100%;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0 res">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Hi All i have Solved this issue.. had MISSED OUT WITH THE META TAG IN HEADER