I have the following issue, if I minimize the browser width, the spans are out of the div:
How can I change the line automatically (without using br)? Like:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row">
<div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
<div class="row">
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
Use word-break: break-all CSS property.
.break-words {word-break: break-all}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row">
<div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
<div class="row">
<div class="row">
<div class="col d-flex justify-content-start flex-column break-words">
<span>pepasdasdsadaiadtoadsasdasssssssda23pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
Try using the CSS property on the span word-wrap: break-word;
Related
I have a 3 row layout and inside of it there are multiple column and row combinations.
I tried this solution, but I couldn't do it to my code. How can I get a Bootstrap column to span multiple rows?
I have problem with 2nd row, I want to align 3rd column.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-6 defect-col">deneme</div>
<div class="col-6 defect-col">deneme</div>
</div>
</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header text-center">Aksiyonlar</div>
</div>
<div class="col-10 column-aligner action-notes">deneme</div>
</div>
</div>
Firstly, rows should always be children of containers. The two have offsetting margins that need to balance. Review the grid docs. I've used the container-fluid class so they're full width.
Then, your columns need to total 12 for a given row (or at least should have the same total for each row). If you can't make that work, consider using Bootstrap's flexbox layout instead of rows and columns.
Also, your nested columns should span the entire row if you want them to stack, meaning you need col-12 instead of col-6 for those.
The only thing remaining is to set heights on the columns, if you actually need them to stretch. That can be done in several ways.
I've added interior divs and some CSS here for demonstration purposes. You wouldn't need those unless you want to apply color as I have.
/* styles for demo only */
.row>div>div:not(.row) {
background: #ddd;
border: 1px dotted #aaa;
}
.today-wrapper>.row {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid past-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid today-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">
Bugün
</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-12 defect-col">
<div>deneme</div>
</div>
<div class="col-12 defect-col">
<div>deneme</div>
</div>
</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid action-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner action-notes">
<div class="column-header text-center">
<div>Aksiyonlar</div>
</div>
</div>
<div class="col-10 column-aligner action-notes">
<div>deneme</div>
</div>
</div>
</div>
the sum of the columns must be 12, if it gives more or less, the layout will be harmed.
I made some adjustments to the columns.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container-fluid text-center">
<div class="past-wrapper bg-danger">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper bg-warning">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">
<div class="w-100 defect-col">deneme</div>
<div class="w-100 defect-col">deneme</div>
</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper bg-primary">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header">Aksiyonlar</div>
</div>
<div class="col-11 column-aligner action-notes">deneme</div>
</div>
</div>
</div>
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
I tried using overflow-x to make it horizontally scrollable. still extra divs are coming down. Is there any way to make it scrollable after using full screen width. please any help. Thank you.
.card{
display:block;
background-color:green;
border:2px solid black;
overflow-x:auto;
whitespace:nowrap;
}
.card-body{
display:block;
background-color:green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
Replace your row class by d-flex and from medium screen it will scroll horizontal as you wish.
It is because row in bootstrap 4 include flex-wrap:wrap;.
DEMO
.card{
display:block;
background-color:green;
border:2px solid black;
overflow-x:auto;
whitespace:nowrap;
}
.card-body{
display:block;
background-color:green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="d-flex">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
I have two different layouts for desktop and mobile view. Here is how they look like
I have written this code so far, but it is not exactly how I need it to be. I don't know how to switch block C and D in mobile view
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-cols-lg-2 row-cols-1">
<div class="row col col-lg-10">
<div class="col-3 bg-secondary">A</div>
<div class="col-9 ">
<div class="row bg-success p-1"> B</div>
<div class="row bg-primary order-lg-2 p-1">D</div>
</div>
</div>
<div class="col col-lg-2">
<div class="col bg-warning p-1">C</div>
</div>
</div>
I need to use Bootstrap grids. Any idea on how to start?
You can use order-xx-N to reorder element at screen , bootstrap has mediaquerie built-in. https://getbootstrap.com/docs/5.0/layout/breakpoints/
Possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3 bg-secondary mb-auto">A
<p class="d-lg-none bg-light">Mobile layout</p>
<p class="d-none d-lg-block bg-info">Desktop layout</p>
</div>
<div class="row col-9">
<div class="col col-lg-9 bg-success p-1">B</div>
<div class="col order-1 p-1 bg-primary ">C</div>
<div class="col-12 bg-warning p-1 order-lg-2">D</div>
</div>
</div>
I'm using bootstrap 4 in an angular app to try and create a grid with several nested boxes, the second column has 2 rows, the bottom one needs to always vertically align to the bottom, ideally it should look like this:
(I achieved this by adding a bunch of br tags)
However, inreality the contect overlaps it it is small and looks like this:
Here is the css I use to align the bottom div:
.bottom {
position: absolute;
bottom: 0;
left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2">
ABC123<br> Text
<br> More Text
</div>
<div class="col-5 border-right border-left border-secondary">
<div class="col-12 p-2">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br> This is a fake text<br>This is a fake text<br>This is a fake text<br>This is a fake text<br>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>
So far everything I have tried has failed, please advise.
Thanks
No extra CSS is needed. Use the Bootstrap utilility classes to make the inner row 'h-100' and then 'mt-auto' to push the content to the bottom...
<div class="col-5 border-left border-right border-secondary">
<div class="row h-100">
<div class="col-12 p-2">
<a [routerlink]="['/tickets', ticket.id]">Lorem Ipsum</a>
<br> This is a fake text
<br>This is a fake text
<br>This is a fake text
<br>This is a fake text
</div>
<div class="col-12 border-top border-secondary mt-auto">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/rxzugvCk80
I tried to replicate it, using flex instead of <br> tag. Is this what you are looking to achieve ?
.text-container {
display: flex;
flex-direction: column;
}
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2">
ABC123<br />
Text<br />
More Text
</div>
<div class="col-5 border-right border-left border-secondary p-0">
<div class="col-12 p-2 text-container">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a><br />
<span>This is a fake text</span>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div
class="col-4 p-2 border-left border-right border-secondary"
>
bottom-align
</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>
you remove css :
.bottom {
position:absolute;
bottom:0;
left:0;
}
and replace with shown in example: add the display class. and also add the container-fluid class for look as result.
.display{
display:flex;
flex-direction: column;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid">
<div class="row">
<div class="col-12 mb-3 border border-secondary rounded">
<div class="row">
<div class="col-2 p-2 ">
ABC123<br>
Text<br>
More Text
</div>
<div class="col-5 border-right border-left border-secondary bootom">
<div class="row">
<div class="col-12 p-2 display">
<a [routerLink]="['/tickets', ticket.id]">Lorem Ipsum</a>
<span>This is a fake text</span>
<span>This is a fake text</span>
<span>This is a fake text</span>
</div>
<div class="col-12 border-top border-secondary bottom">
<div class="row">
<div class="col-4 p-2">bottom-align</div>
<div class="col-4 p-2 border-left border-right border-secondary">bottom-align</div>
<div class="col-4 p-2">bottom-align</div>
</div>
</div>
</div>
</div>
<div class="col-3 p-2 border-right border-secondary">Test</div>
<div class="col-2 p-2 text-center">Test</div>
</div>
</div>
</div>
</div>