I have random numbers of columns (generated by FOR loop).
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
<div class="col-sm-4 col-xs-6">CONTENT</div>
</div>
</div>
I would like to center last row of columns. By default very last 1 or 2 columns are aligned to left. Is there any way to center them easily, or shall I skip using "col-" and use flexbox instead?
Source: CODEPEN.IO
You can add flex style to the parent of your column, which is .row here in this example.
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
try like this.. i added align-center class to display center div
html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row align-center">
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
<div class="col-sm-4 col-xs-6 mycol">CONTENT
</div>
</div>
</div>
css
.mycol {
background: tomato;
padding: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.align-center{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
Add this to the 4th div like so <div class ="col-sm-offset-2>
Related
I am trying to make a dice with the help of bootstrap grid. Although I am not done with it yet, here is small snippet of code containing what I have written. When I am inspecting my webpage using dev tools (picture attached), my container-fluid div which basically includes all my code is not displaying to contain the box divs?
Can you explain me why so?
I have attached my HTML and CSS code as well.
body {
background-color: rgb(41, 36, 36);
text-align: center;
font-family: 'Bungee Spice', cursive;
margin: auto;
}
h2 {
margin-bottom: 10%;
margin-top: 10%;
}
.result {
font-size: 500%;
margin: 5% auto;
}
.box {
width: 60%;
height: 180%;
/* padding-bottom: 60%; */
background-color: yellow;
margin: auto;
border-radius: 10%;
}
.container-fluid {
margin-bottom: 5%;
}
/* .circle1 {
background-color: black;
width: 100%;
height: 100%;
border-radius: 50%;
} */
/* .box-row {
width: 100%;
padding-bottom: 10%;
margin: auto;
background-color: red;
} */
#media (max-width: 1300px) {
.result {
font-size: 400%;
}
}
#media (max-width: 1100px) {
.result {
font-size: 300%;
}
}
#media (max-width: 991px) {
button {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap" rel="stylesheet">
<h1 class="result">Welcome, <span class="playerName"></span></h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"></div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>You</h2>
<div class="box">
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row box-row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<h2>Computer</h2>
<div class="box">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle1"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle2"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle3"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle4"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle5"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle6"></div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle7"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle8"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="circle9"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3"></div>
</div>
</div>
<button type="button" class="btn btn-outline-warning">Roll</button>
I see you have commented out the only style that would apply to the dots inside of the yellow boxes, but in general, the issue is that the bootstrap grid doesn't inherit any height, and the height: 100% that you have defined comes out as 0. If you would change the .circle1 height to a fixed size or apply a height to the dots row, then it would show up.
I started to learn Bootstrap since few days, and I am facing a problem about horizontal alignment.
In my exemple below, I want to distribute equitably the three divs "first", "second" and "third" on the screen, but it doesn't work.
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
Nevertheless, "justify-content-between" doesn't change anything...
Does anyone could help me?
If your using boostrap 4.1.1
https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
.row is used
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
so you can just use,
<div class="container">
<div class="row ">
<div class="col-12 col-md-4 first">
<div class="text-center">
first 1
</div>
</div>
<div class="col-12 col-md-4 second">
<div class="text-center">second<br>second</div>
</div>
<div class="col-12 col-md-4 third">
<div class="text-center">third<br>third<br>third</div>
</div>
</div>
</div>
Further follow https://getbootstrap.com/docs/4.1/layout/grid/
Use only the col class instead of all the other col-* classes for the three columns.
.first,
.second,
.third {
height: 500px;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="first"></div>
</div>
<div class="col">
<div class="second"></div>
</div>
<div class="col">
<div class="third"></div>
</div>
</div>
</div>
You should not use fixed height. I have used just to show that the divs are aligned at the center.
Visit this link for more info
Update
If the content of the columns are img as you have commented that they are, then you should do this:
Use only col-12 and col-md-4. col-12 covers col-sm-12. And col-md-4 covers col-lg-4 also.
For the images, use img-fluid, d-block, and mx-auto classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 ">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
Update
In order to add space on the left and right side of the images, use px-5 for the columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
</div>
<div class="col-12 col-md-4 px-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
</div>
</div>
</div>
Check this pen
if you still need more space, use custom css.
.px-10 {
padding-left: 120px;
padding-right: 120px;
}
what i understood from that image that you sent that mean you already defined width and height for those divs and if you want to center those divs into the col you have to use margin:auto
PLEASE open the snippet in a full page mode to see it clearly
i just make a snippet to show you 2 cases the first case if you dont use fixed width it will take the col width as you define it here col-12 col-sm-12 col-md-4 col-lg-4" but once you use fixed width then you have to center the div with margin:auto
.row {
background-color: #eee;
}
.first {
height: 100px;
/* width: 100px; */
background-color: red;
}
.second {
height: 100px;
/* width: 100px; */
background-color: blue;
}
.third {
height: 100px;
/* width: 100px; */
background-color: green;
}
.first2 {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
.second2 {
height: 100px;
width: 100px;
background-color: blue;
margin: auto;
}
.third2 {
height: 100px;
width: 100px;
background-color: green;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second2"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third2"></div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="first3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="second3"></div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="third3"></div>
</div>
</div>
</div>
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I want to center two divs, into another div (horizontally). Can someone tell me how can I do it, in the bellow code? I want to have the two divs with the classes box-left and box-right, in the middle of the div with the class outer:
<html>
<head>
<style>
.container{
background-color: blue;
}
.outer{
text-align: center;
}
.width-600{
width:600px;
text-align:left;
margin-right: auto;
margin-left: auto;
}
.box-left{
background-color: yellow;
}
.box-right{
background-color: green;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="outer">
<div class="row width-600">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
</body> </html>
You can use display:flex and justify-content:center on .outer class ,would center the two rows
check the following snippet
.container {
background-color: blue;
}
.outer {
display:flex;
justify-content:center;
}
.width-600 {
width: 400px;
}
.box-left {
background-color: yellow;
}
.box-right {
background-color: green;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="outer">
<div class="row ">
<div class="col-xs-12 col-md-4">
<div class="box-left">left</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="box-right">right</div>
</div>
</div>
</div>
</div>
replace this body in your html and see if it works for you..
<body>
<div class="container">
<div class="row width-600">
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-left">left</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<div class="box-right">right</div>
</div>
<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
</div>
</div>
</div>
</body>
I need to align TEXT of container-fluid at same padding/margin like container.
You have example in this image:
EDIT: See 2nd photo, i want that padding to be the same on container-fluid / container, and when you minimize screen to be responsive..
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.bg {
background-color: #f3f3f3;
}
.left {
height: 650px;
}
.img-bg {
margin-right: 0px !important;
height: 650px;
background: url(http://placehold.it/850x650) no-repeat center center;
background-size: cover;
}
<section id="id1">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 nopadding bg">
<div class="left">
<h2>TEXT</h2>
</div>
</div>
<div class="col-md-5 nopadding img-bg">
</div>
</div>
</div>
</section>
Here is my solution:
HTML part:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 image no-padding">
<div class="full-width"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
</div>
CSS part:
.center-flex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.container-fluid .text {
background: #515467;
height: 650px;
}
.container .text {
background: #737373;
height: 300px;
}
.container-fluid .image {
background: #2D2D2D;
height: 650px;
}
.full-width {
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('http://placehold.it/850x650');
background-size:cover;
}
.full-width img {
width:100%;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
You can see the jsfiddle result: https://jsfiddle.net/DTcHh/18725/
try with this below code it may help you
.text1{
background : #0f74bd;
padding : 50px;
color : white;
font-weight : bold;
}
.image{
background : #000;
padding : 50px;
color : white;
font-weight : bold;
}
.text{
background : #9ea3a9;
padding : 50px;
color : white;
font-weight : bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6 text1">
TEXT1
</div>
<div class="col-sm-6 col-md-6 col-xs-6 image">
IMAGE
</div>
</div>
</div>
<div class="container text">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div style="background-color: blue" class="container-fluid">
<h1 style="text-align:center">Container-Fluid</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">TEXT 1</div>
<div style="text-align:center" class="col-xs-6">IMAGE</div>
</div>
<div style="background-color: yellow" class="container">
<h1 style="text-align:center">Container</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">Text 1</div>
<div style="text-align:center" class="col-xs-6">Text 2</div>
<div style="text-align:center" class="col-xs-6">Text 3</div>
<div style="text-align:center" class="col-xs-6">Text 4</div>
</div>
</div>
</div>
</body>
</html>
Is this what u want, using bootstrap