How to set the width of multiple element with Bootstrap? - html

I am trying to create a bootstrap app in my project.
In my example, I want 3 yellow columns width to match the 3 green columns width. How do I do it?
html:
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
<div class="row">
<div id="wrapper" class="col-xs-9">
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
</div>
CSS
#main{
background-color:red;
height:300px;
}
#second{
background-color:blue;
}
.first-table{
background-color:green;
border:solid 1px black;
}
#wrapper{
display:table;
width:100%;
position:absolute;
}
#col1, #col2, #col3{
background:yellow;
border:solid 1px black;
}
JS Fiddle.
http://jsfiddle.net/a1zpb8su/2/
Thanks for the help!


Make a CSS class that you can set specific elements with one common width. This will give you total control over which elements will have the same width.
HTML:
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3 match-width">
title-col-1
</div>
<div class="first-table col-xs-3 match-width">
title-col-2
</div>
<div class="first-table col-xs-3 match-width">
title-col-3
</div>
</div>
</div>
<div class="row">
<div id="wrapper" class="col-xs-9">
<div class="row">
<div id="col1" class="col-xs-3 match-width">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3 match-width">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3 match-width">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
</div>
CSS:
.match-width {
width: 100px;
}
Working Example


Here it is:
You need make columns on right place, and also rows need placed correctly. Bootstrap on wrapping use a class name `container.
Also you need use structure:
<div class="row">
<div class="col-xs-12">
<div class="row">
If on parent col is children cols, you need wrap it intro row class.
http://jsfiddle.net/a1zpb8su/24/


There really is not much of a need to have nested rows. We can just remove those, the unused classes and id's. Then place second in the first row, and make it a div other than p so it takes the same space has your header. Also for the same width you want to set both to col-xs-8, other than col-xs-8 and col-xs-9
Here are the changes: Fiddle here
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div>
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<div>second </div>
</div>
</div>
<div class="row">
<div class="col-xs-8">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>


You had your second row inside your first; they were nested. you also had one col set to col-xs-8 and the other set to col-xs-9. I made them both col-xs-8 to work with col-xs-4
<div id="main">
<div class="row">
<div id="title-wrapper" class="col-xs-8">
<div id="wrapper1">
<div class="row">
<div class="first-table col-xs-3">
title-col-1
</div>
<div class="first-table col-xs-3">
title-col-2
</div>
<div class="first-table col-xs-3">
title-col-3
</div>
</div>
</div>
</div>
<div id="second" class="col-xs-4">
<p>second </p>
</div>
</div>
<!-- moved this row out of the other -->
<div class="row">
<div id="wrapper" class="col-xs-8">
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
</div>
</div>
UPDATE: If you want to keep them nested, use this
<div id="main">
<div class="col-xs-8">
<div class="row">
<div class="first-table col-xs-3">title-col-1</div>
<div class="first-table col-xs-3">title-col-2</div>
<div class="first-table col-xs-3">title-col-3</div>
</div>
<div class="row">
<div id="col1" class="col-xs-3">
<p>Col 1</p>
<p>Col 1</p>
</div>
<div id="col2" class="col-xs-3">
<p>Col 2</p>
<p>Col 2</p>
</div>
<div id="col3" class="col-xs-3">
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
<p>Col 3</p>
</div>
</div>
</div>
<div class="col-xs-4">
<p>second </p>
</div>
</div>

Related

Dividing a row into 4 columns which should be displayed same on mobile

How to divide a row into 4 columns and on mobile it should be like 2 rows with 2 columns each. Trying in angular 6
<div class="row" id="info" *ngIf="this.details">
<div class="col-md-12 mb-3" id="heading">
<h3>Meeting Information</h3>
</div>
<div class="col-md-2 mb-3">
<p class="msg">Resource Name</p>
<p class="msg"> Resource Email</p>
<p class="msg"> Contact</p>
</div>
<div class="col-md-4 mb-3">
<div>
<p>: shammy</p>
</div>
<div>
<p>: shammy#gmail.com</p>
</div>
<div>
<p>: 7093241844 </p>
</div>
</div>
<div class="col-md-2 mb-3">
<p class="msg">Meeting Title</p>
<p class="msg">Meeting Feedback Link</p>
<p class="msg">Meeting Time</p>
<button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
</div>
<div class="col-md-4 mb-3">
<div>
<p>: shammy</p>
</div>
<div>
<p>: shammy#gmail.com</p>
</div>
<div>
<p>: 7093241844 </p>
</div>
<div>
<button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
</div>
</div>
</div>
It is working good on pure HTML. When i see the responsiveness it is making 2 rows with 2 columns each. The same should work for my code in angular
<div class="col-xs-12 col-sm-6">
<div class="col-xs-3 col-sm-6">
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
</div>
<div class="col-xs-3 col-sm-6">
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-3 col-sm-6">
<p>Column 3</p>
<p>Column3</p>
<p>Column 3</p>
<p>Column 3</p>
</div>
<div class="col-xs-3 col-sm-6">
<p>Column 4</p>
<p>Column 4</p>
<p>Column 4</p>
<p>Column 4</p>
</div>
</div>
I tried the same HTML in angular but it dosent work the same. It should divide into 2 rows with 2 columns each

I think inside the div with class row, each div should have a class of col-xl-3 col-lg-3 to make it span in a single row on extra-large and lage devices and col-md-6 col-sm-6 col-xs-6 to make it span in two rows on medium, small and extra-small devices.
Give this a try:
<div class="row" id="info" *ngIf="this.details">
<div class="col-lg-12" id="heading">
<h3>Meeting Information</h3>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<p class="msg">Resource Name</p>
<p class="msg"> Resource Email</p>
<p class="msg"> Contact</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div>
<p>: shammy</p>
</div>
<div>
<p>: shammy#gmail.com</p>
</div>
<div>
<p>: 7093241844 </p>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<p class="msg">Meeting Title</p>
<p class="msg">Meeting Feedback Link</p>
<p class="msg">Meeting Time</p>
<button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
<div>
<p>: shammy</p>
</div>
<div>
<p>: shammy#gmail.com</p>
</div>
<div>
<p>: 7093241844 </p>
</div>
<div>
<button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
</div>
</div>
</div>
Here's a Working Sample StackBlitz for your ref.

<div class="row" id="info" *ngIf="this.details">
<div class="col-md-12 mb-3" id="heading">
<h3>Meeting Information</h3>
</div>
<div class="col-6 col-md-3">
<p class="msg">Resource Name</p>
<p class="msg"> Resource Email</p>
<p class="msg"> Contact</p>
</div>
<div class="col-6 col-md-3">
<p>: shammy</p>
<p>: shammy#gmail.com</p>
<p>: 7093241844 </p>
</div>
<div class="col-6 col-md-3">
<p class="msg">Meeting Title</p>
<p class="msg">Meeting Feedback Link</p>
<p class="msg">Meeting Time</p>
<button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
</div>
<div class="col-6 col-md-3">
<p>: shammy</p>
<p>: shammy#gmail.com</p>
<p>: 7093241844 </p>
<button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
</div>
</div>
The above code works fine for me

How to wrap image with text separate in col-6

I have a lot of contents in my paragraph and I need to wrap image with the content.
How can I do this?
<div class="row">
<div class="col-sm-6>
<img src="something/something.jpg alt="something" />
</div>
<div class="col-sm-6>
<p>some loooong text</p>
</div>
</div>

If you have to use col-sm-6, this gives you something similar to your link in the comments:
<div class="row">
<div class="col-sm-6">
<p>First paragraph...</p>
<p>Second paragraph....</p>
</div>
<div class="col-sm-6">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>Third paragraph...</p>
</div>
</div>

Align bootstrap columns

On my website (team section) I have something like this 6x :
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
The issue is that I don't know how to align the last 2 ones to the middle of the bag, like on the illustration below.
How can I achieve this?
Many thanks,

Here is a bootply: http://www.bootply.com/oTea5I7wZX
On the last row with offseting columns :
<div class="row">
<div class="col-xs-6 col-md-4 col-md-offset-2">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
</div>
Full HTML
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 col-md-offset-2">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="team-member">
<div class="image" style="background-image:url('//placehold.it/150x150')">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
</div>
</div>

You can use flex-box for last row as below:
<div class='row'>
<div class="team-member align-center">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
<div class="team-member align-center">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">Jane Doe</p>
<p class="position">Sells</p>
</div>
</div>
and add the class align-center as below:
.align-center {
display: flex;
justify-content: space-around;
}

Why do we need to add .clearfix after every 12th column in bootstrap?

I am studying bootstrap from this online tutorial. In Creating Multi-Column Layouts with Bootstrap 3 Grid System section they say:
If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.
I tried giving different heights to columns within a row. I found that that I do not need .clearfix, because the layout is not breaking. Applying .clearfix or not appplying it doesn't make any difference to the layout.
Without `.clearfix:
#import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<!-- <div class="clearfix visible-md-block"></div> -->
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
</div>
With .clearfix:
#import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Box 1</p>
</div>
<div class="col-md-4">
<p>Box 2</p>
</div>
<div class="col-md-4">
<p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 4</p>
</div>
<div class="col-md-4">
<p>Box 5</p>
</div>
<div class="col-md-4">
<p>Box 6</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 7</p>
</div>
<div class="col-md-4">
<p>Box 8</p>
</div>
<div class="col-md-4">
<p>Box 9</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4">
<p>Box 10</p>
</div>
<div class="col-md-4">
<p>Box 11</p>
</div>
<div class="col-md-4">
<p>Box 12</p>
</div>
</div>
</div>
So, why use .clearfix if doesn't make any difference?

Bootstrap's own documentation gives a good example of why in its Responsive Column Resets section:
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
This is what the example markup they use looks like with the .clearfix class in place:
This is what it looks like without it:

When the device is x-small, make the divs in the same line (Bootstrap)

Please see my code and jsfiddle below.
I want that when I minimize the browser to Extra-Small Deviece it will show the left side in one line (without the title "TITLE 1") in the center. Something like that: http://oi67.tinypic.com/10hksxs.jpg
Code:
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<h4><strong>TITLE 1</strong></h4>
<div class="row">
<div class="col-sm-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-sm-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-sm-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-sm-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
</div>
<div class="col-sm-8">
<h4><strong>TITLE 2
</div>
</div>
</div>
JSFIDDLE: http://jsfiddle.net/Wy22s/864/
Thanks!

I hope it's what you looking for: jsfiddle
<div class="container text-center">
<div class="row hidden-xs">
<div class="col-sm-4">
<h4><strong>TITLE 1</strong></h4>
</div>
<div class="col-sm-8">
<h4><strong>TITLE 2</strong></h4>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-xs-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-xs-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-4">
<img src="http://demo.chimerathemes.com/wp-content/themes/apppress/images/icons/included/color.png">
</div>
<div class="col-xs-8 text-left">
<p class="mid-image-block"><strong>MINI TITLE</strong>
<br>TEXT
<br>TEXT2 </p>
</div>
</div>
</div>
</div>
</div>