I'm new to bootstrap and I am having some trouble getting two jumbotrons to sit on one row (without space in between.) No matter how small I make their respective columns, they stay on separate rows.
Here is my HTML:
<div class="col no-gutters">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
I have not messed with the default bootstrap CSS. Thank you in advance!!!
The class of the containing div should to be row, not col:
<div class="row no-gutters">
Bootstrap's Grid system has column spacing (padding) by default. There are a few ways to address this issue to adapt to your requirements.
One approach could be to add a new CSS selector, and then modify your HTML accordingly.
CSS:
/* Add this */
.no-padding {
padding-right:0;
padding-left:0;
}
HTML:
<div class="col">
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
Related
How to display 3 lines inline side by side in bootstrap? I have a serious problem in the height and the width! If I use css only it displays. However when I want to use bootstrap I am getting stuck.
Here the code using CSS with only one line! The same process for the remaining two lines:
<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"
How to do it using bootstrap? Should I use a parent class to get the height and the width?
You was thinking of something like this?
<div class="col-lg-3 text-center bg-secondary" style="height:200px;width:auto"></div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
<div class="col-md-4">
<div class="p-5 bg-danger"></div>
<p class="text-center">Lorem ipsum dolor sit</p>
</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm not sure if my issue is the nested row, but I can't get the inner row vertical aligned centered within it's alert-box. Anyone any hint what I'm doing wrong?
https://jsfiddle.net/d2pg4xta/
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row"> <!-- here is my nested row -->
<div class="col-md-6"><p class="mb-0">1:</p></div>
<div class="col-md-6"><p class="mb-0">A</p></div>
<div class="col-md-6"><p class="mb-0">2:</p></div>
<div class="col-md-6"><p class="mb-0">B</p></div>
<div class="col-md-6"><p class="mb-0">3:</p></div>
<div class="col-md-6"><p class="mb-0">C</p></div>
<div class="col-md-6"><p class="mb-0">4:</p></div>
<div class="col-md-6"><p class="mb-0">D</p></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Update: It's not about aligning the 2 alert-boxes, it's about the inside of my left alert-box. I expect the inside row containing the content (abcd1234) to be more centered withing it's own alert-box like this: https://ibb.co/myntK5j
Do this:
.alert-dark {
display: flex; /*add*/
flex-direction: column; /*add*/
align-items: center; /*add*/
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}
You need to use flex on .alert-box and remove margin from .row
Js fiddle: https://jsfiddle.net/zbywdacp/
Live Demo:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.alert-dark {
display: flex;
align-items: center;
justify-content: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row m-0">
<div class="col-md-6">
<p class="mb-0">1:</p>
</div>
<div class="col-md-6">
<p class="mb-0">A</p>
</div>
<div class="col-md-6">
<p class="mb-0">2:</p>
</div>
<div class="col-md-6">
<p class="mb-0">B</p>
</div>
<div class="col-md-6">
<p class="mb-0">3:</p>
</div>
<div class="col-md-6">
<p class="mb-0">C</p>
</div>
<div class="col-md-6">
<p class="mb-0">4:</p>
</div>
<div class="col-md-6">
<p class="mb-0">D</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Try adding display: flex; to .alert.alert-dark.
I would like to build a grid system using boostrap 4, I have a newspaper that on tablet/desktop mode show three columns each row, instead on mobile mode I would like to show only one column each row.
The documentation to this link https://getbootstrap.com/docs/4.1/layout/grid/
describe the Class prefix across multiple devices.
On tablet/desktop mode everything run well, but on mobile mode I have problems.
This picture show how should be on mobile mode
This pics show the problems that I have on mobile mode
This is the code:
<div class="container">
<div class="row no-gutters">
<!-- Article 1 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column1' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 2 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column2' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 3 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column3' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
</div>
Firstly col-sm-12 col-lg-4 col-xl-4 is unnecessary. Bootstrap grid work well. Maybe your title (SERIE BI) is too long. Try to give it max-width: 100%
Just use class="col-4" it's enough
You don't need all these styles col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<!-- Article 1 -->
<div class="col-4">
<div class="content">
<div id='column1' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 2 -->
<div class="col-4">
<div class="content">
<div id='column2' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 3 -->
<div class="col-4">
<div class="content">
<div id='column3' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
</div>
I have to create this layout responsive for a custom slider:
https://imgur.com/YbKdOAC
https://imgur.com/TPo2h57
-The icon of an image is where the slides are going to be.
-There is another pink block with the controls of the slider.
-The last pink block has some text. Nothing special.
There are 2 background-images in those patterns.
I began with the desktop version using flexbox, but when I try to adjust the layout to the tablet version, it was imposible because this two elements are in different rows.
https://imgur.com/Upjsh8B
This is more or less my code right now:
<div class="slider">
<div class="container">
<div class="row">
<div class="col-3">
<img class="logo-img"
src="assets/images/logo.png">
<div class="titulo-boton">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="col-9">
<div class="row primera" primera>
<div class="col yourtrip">
<h2>Lorem ipsum</h2>
<hr>
<p class="tags">#tags</p>
</div>
<div class="col"></div>
<div class="col ">
<div class="image-slider image-wrap">
<!-- <img src="assets/images/rocket.png">-->
</div>
</div>
</div>
<div class="row" segunda>
<div class="col"></div>
<div class="col controls" controls>
<div class="botones row w-100">
<div class="col p-0">
prev
</div>
<div class="col p-0">
next
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your help!
Edit:
I have created a pen to make the things easier. The assets are different but the layout is the same.
https://codepen.io/jenvigo/pen/jRrwdw?editors=1100
My columns are displaying on top of each other in the same row. Their columns add up to 12.
HTML:
<section class="container">
<div class="content row">
<section class="main col col-sm-8">
<h2>main content</h2>
<p>Lorem ipsum</p>
</section> <!-- col-lg-8 -->
<section class="sidebar col col-sm-4">
<h2>SIDEBAR</h2>
<p>Lorem ipsum</p>
</section> <!-- col-lg-4 -->
</div> <!-- row -->
</section> <!-- container -->
Don't think you can use section tags, you need to use divs. What's that content class for? Something custom? Here's the basic layout
<div class="container">
<div class="row">
<div class="col-lg-8">
<h2>main content</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-4">
<h2>Sidebar</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
i don't think there is main or sidebar classes in bootstrap
you maybe did some styling that affected the default bootstrap behavior the code you added should add to
columns when having enough width