Having the following code (pen here), I tried to autofit the second column width to its content with auto margins that does not seem to work.
.col {
border: 1px solid red;
}
.autofit {
margin: auto;
width: auto;
max-width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row m-5">
<div class="col">1</div>
<div class="col autofit">2*</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Is there another way to autofit the column width?
I also tried width: fit-content(100px);, but it didn't work either...
You can use the Bootstrap-class .col-auto for this. Simple and effective!
.col, .col-auto {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row m-5">
<div class="col">1</div>
<div class="col-auto">2*</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Related
I am trying to make a responsive design on the page using bootstrap grid.
Here is my HTML:
<div class="row row-2">
<div class = "col-sm-4 col-sm-offset-2">
<img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
</div>
<div class="col-sm-4 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small column class is it possible to put the second column on the top?
With code above the second column goes on the bottom. I can't interchange the content of the columns as I want first column to be on the left on the bigger screen.
Thanks in advance!
If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.
Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.reverse {
display: flex;
flex-direction: column-reverse;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
/* Desktop View */
#media (min-width: 1281px) {
.reverse {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="reverse">
<div class="row">
<div class="col">
Row 1
</div>
</div>
<div class="row">
<div class="col">
Row 2
</div>
</div>
</div>
</div>
you can do something like this if you don't want use bs4 or don't know how to use display:flex.
don't forget to change the class names as you want
.row-2 {
direction: rtl;
}
.row-2 .col {
direction: ltr !important;
border: 1px solid #eee;
background: #fefefe;
padding: 1rem;
}
.row-2 .col-md-offset-2{
margin-left: 0;
margin-right: 16.66666667%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-2">
<div class="col col-md-4 col-sm-12 col-md-offset-2">
<img class="img-responsive header-notebookImg" src="https://artbees-themes-artbees1.netdna-ssl.com/wp-content/uploads/2018/10/jupiter-x-bootstrap-logo.jpg" alt="">
</div>
<div class="col col-md-4 col-sm-12 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
I see many custom css classes here, bootstrap has built-in css classes for that, no need to write custom ones.
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
Sorry if the title is confusing. I have included a screenshot of my issue to make it more clear.
Essentially, I want the green-bordered div to be directly underneath the red-bordered div without the blue-bordered div interfering.
Here is my HTML code (I am using Bootstrap v3.3.7)
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6" id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
<div class="row">
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
My CSS is only putting the borders around the div. Everything else is bootstrap.
#song-view{
border: 2px solid red;
}
#songs-added{
border: 2px solid blue;
}
#playlist-form{
border: 2px solid green;
}
In this case, use pull-right, and keep all of the col- in a single row.
<div class="container appParent">
<div class="row">
<div class="col-md-6" id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div class="col-md-6 pull-right col-xs-12" id="songs-added">
<app-songs-added></app-songs-added>
</div>
<div class="col-md-6" id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
</div>
http://www.codeply.com/go/189ofQG5Sj
You can re-arrange your HTML.
#song-view {
border: 2px solid red;
height: 100px;
margin-bottom: 30px;
}
#songs-added {
border: 2px solid blue;
height: 150px;
}
#playlist-form {
border: 2px solid green;
height: 100px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container appParent">
<div class="row">
<div class="col-md-6">
<div id="song-view">
<app-selected-song-view></app-selected-song-view>
</div>
<div id="playlist-form">
<app-playlist-form></app-playlist-form>
</div>
</div>
<div class="col-md-6">
<div id="songs-added">
<app-songs-added></app-songs-added>
</div>
</div>
</div>
</div>
You can simple use min-heights and surround the containers and rows with a div for extra styling. You can check this example I quickly made: JsFiddle
<div class="song-list">
<div class="row">
<div class="container">
<div class="col-md-6" id="song-view">
Song View
</div>
<div class="col-md-6" id="songs-added">
Songs Added
</div>
</div>
</div>
</div>
<div class="playlist">
<div class="row">
<div class="container">
<div class="col-md-6" id="playlist-form">
Playlist Form
</div>
</div>
</div>
</div>
CSS:
.song-list #song-view {
border:1px solid blue;
min-height:300px;
}
.song-list #songs-added {
border:1px solid red;
min-height:500px;
}
.playlist #playlist-form {
border:1px solid green;
}
My homepage consists of multiple blocks(top part/mid part/bottom part). I've created a row for each block. I want to add some space between my blocks in Bootstrap. Can I simply give my rows id's and add some margin, or is this wrong?
Structure of my code:
<div class="container" id="ho_main_content">
<div class="row">
<div class="col-md-12 text-center"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
This "answer" of mine should really be a comment; however, I don't have enough rep.
For an answer, yes, give the divs with the row class another class, probably something like this, spacing the top and bottom of each 10px:
.part {
margin: 10px 0;
}
An important thing to think about when using frameworks like bootstrap is that it isn't the end of the world if you modify the components or spacing or something. Some things won't look like you want them to; just give them extra classes, or if you are desperate, use the !important flag. It was built on the same technology, after all.
In bootstrap 5 I add g-0 to g-5 class with row class to add space around each col.
EX.
<div class="row g-3">
<div class="col">...</div>
<div class="col">...</div>
</div>
https://getbootstrap.com/docs/5.0/layout/gutters/
/*you can create your own custom css for use here is some example*/
.border {
border: 1px solid red; /* just to make sure space between blocks*/
}
.margin-top {
margin-top: 5px;
}
.nopad{
padding:0 ;
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
<div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
</div>
<div class="row border margin-top">
<div class="col-md-12">text2</div>
</div>
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->
<div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
</div>
</div>
</body>
Here is what I have
And here is what I want to accomplish
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div>
</body>
</html>
You need to try like this-
Just use this below script -
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display:inline-flex;
vertical-align:top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
<div style="height:200px;" class="card grid-item">1</div>
<div style="height:240px;" class="card grid-item">2</div>
<div style="height:200px;" class="card grid-item">3</div>
<div style="height:270px;" class="card grid-item">4</div>
<div style="height:300px;" class="card grid-item">5</div>
<div style="height:250px;" class="card grid-item">6</div>
</div>
import bootstrap and format the divs using col-md- in rows. i believe you have that css.
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div class="rows">
<div class="col-md-4">
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div></div>
<div class="col-md-4">
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div></div>
<div class="col-md-4">
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div></div>
</div>
</body>
</html>
This is not possible using plain CSS.
You can either change your HTML to have a wrapping "column" div for every two (in your case) .card elements, or alternatively there are lots of javascript plugins that you can easily achieve this layout by manipulating the HTML dynamically... Check http://masonry.desandro.com/ as one good example
This is the quick answer; but for DIVs with dynamic heights, I beleive it's better using a jQuery plugin (e.g. masonary as Ronen mentioned).
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px; top:-40px; position:relative;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px; top:-40px; position:relative;" class="card">6</div>
</body>
</html>
I'm trying to center a bunch of divs with a fixed size. I want it to work with a relative/unspecified window size. The code below works so long as the divs don't wrap around to the next line. As soon as they wrap, everything gets aligned to the left. The plan is to dynamically generate lots of these and have it be vertically scrollable only. My CSS skills are pretty weak. Any advice? Thanks in advance.
.container {
margin: 0 auto;
display: table;
}
.block {
background: #999;
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<!--
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
-->
</div>
</body>
</html>
You can use display:inline-block; instead of float:left and then give text-align:center; to their parent and don't forget to remove extra spaces which is occurred by display:inline-block;
.container {
margin: 0 auto;
display: table;
text-align:center;
}
.block {
background: #999;
/* float: left; */
display:inline-block;
width: 50px;
height: 50px;
margin: 5px;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
<div class="block">10</div>
<div class="block">11</div>
<div class="block">12</div>
<div class="block">13</div>
<div class="block">14</div>
<div class="block">15</div>
</div>
</body>
</html>