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>
Related
I have a problem with aligning all the containers in the given example. I would like them to adapt to the height of the largest container.
I have already tried several dozen ways and nothing h-100 helps, unfortunately.
I am giving you a link to the example as it is supposed to look like and it looks like a design designed by a graphic designer - https://prnt.sc/vnwn38
.comment__container{
background-color: #eee;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="comment__header text-center">
<h2>Komu pomogłam</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Joanna</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,Autem corporis, Autem corporis, Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Martyna</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- Aleksandra</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Bardzo miły i profesjonalny kontakt. Dziękuję bardzo Pani Ewo za pomoc! Polecam! </p>
</div>
<div class="comment__container-author text-right">
<p>- Monika</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- tata Łukasz</p>
</div>
</div>
</div>
</div>
</div>
I am trying to layout a grid in bootstrap that consists on the desktop of a full 12 column layout, inside that, there is a 8 column grid and a 4 column grid. the 8 column grid is filled with an image/text, the 4 column grid consists in its own of 2 elements below each other containting image/text.
on smaller breakpoint the layout should simply show 3 elements in same size below each other.
I fiddled around but I do not get it to work. Below you also find next to the html a sketch from what I am trying to achieve. Any hints? I do not feel this is possible out of the box with bootstrap 4.
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</section>
As a sketch it looks like this:
You need to specify the smaller col width. You also had an extra unnecessary row and col wrapping it. Below is a working example of what you are looking for. col-12 class was added for any screen smaller than md
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
Please try this snippet.
.row {
margin: 20px 0;
}
.col .card {
height: calc(100% - 10px);
}
.card{
margin-bottom: 10px;
}
.card img {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-sm">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
I entered the following code into app.component.html, however when viewing the angular app in the browser, nothing loads.
I have removed all <html><body> and <head> tags. As I believed this was the problem.
app.component.html
<div class="maincont">
<div class="nav">
<ul>
<li>
{{title}}
</li>
<li>
Projects
</li>
<li>
Login
</li>
</ul>
</div>
<div class="header">
<div class="heading">
<center>{{title}}</center>
</div>
</div>
<div class="projects" id="projects">
<h1>Projects</h1>
<div class="grid">
<div class="cell">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt fugiat ab ducimus culpa ratione iure
fugit, placeat dolor eveniet dignissimos!</p>
</div>
<div class="cell">
<h1>Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto repudiandae quia dolorum, esse,
perferendis odio, temporibus debitis inventore vitae officia animi. Quas temporibus voluptate consequatur
mollitia dolorem optio vel libero!</p>
</div>
<div class="cell">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti molestiae deserunt voluptates tenetur
ducimus dolore similique, ratione sit blanditiis! Quaerat illo earum autem hic?</p>
</div>
<div class="cell">
<h1>Lorem.</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis nisi assumenda itaque inventore neque
exercitationem. Voluptatem libero ducimus eos aliquam porro odio modi facilis.</p>
</div>
</div>
</div>
</div>
The other files (app.component.ts, app.component.css) are unchanged after running;
ng new App
I tried your Html and yea, looks like the <center> tag is not supported. <div style="text-align:center"></div> should fix it!
I came to this conclusion by using Developer Tools (F12) while running your code and looking at the "Console" for guidance
The <center> tag is not supported in HTML5. Use CSS instead. The <center> tag is used to center-align text.
so use css instead of using center tag
Look at the screen below (I'm using Bootstrap):
Adding a padding can solve this problem but it is not responsive for mobile devices. Is there a better way to this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-primary text-white ">
<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-6 ">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 bg-primary text-white ">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-6">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
</p>
</div>
</div>
</div>
</section>
Check below upsated html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-3 bg-primary"></div>
<div class="col-md-3 bg-primary text-white ">
<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-3"></div>
<div class="col-md-3 bg-primary text-white ">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
I'm creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail's height.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p>VK Instagram</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
</div>!
How it looks now:
You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it's a bootstrap class you have to give it other class name and assign position relative to it.
And position of the div containing buttons. (in your case vertical-container1) to position absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
You could set a minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure all the text area's are the same height even if there is not enough text to push the buttons down.
An Exmaple
of course this could go the other way and end up having too much text in which case you'll want to add a maximum height thus;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...
.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
you try code before:
.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}