Bootstrap grid configure correct alignment

up vote
0
down vote

favorite

I'm using the bootstrap grid system, and I'm trying to get a correct view on both wide windows (desktop, tablet) and narrow windows (mobile screens).

What I want on wide screens is this:

[image 1][image 2][text 1]
[image 3][image 4][text 2]

On a mobile I'd like to see this:

[image 1][image 2]
[image 3][image 4]
[text 1] [text 2]

What I'm currently getting on mobile or narrow desktop windows is:

[image 1][image 2]
[text 1]
[image 3][image 4]
[text 2]

Here is a jsfiddle link. The code is also below:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <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">
 </head>
 <body>
 <div class="container">

 <div class="panel-group">
 <div class="panel panel-primary">
 <div class="panel-heading">Panel Header</div>
 <div class="panel-body">

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div> 
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 </div>
 </div>
 </div>
 </div>
 </body>
</html>

asked Nov 10 at 18:56

remi

343421

add a comment |

up vote
0
down vote

favorite

I'm using the bootstrap grid system, and I'm trying to get a correct view on both wide windows (desktop, tablet) and narrow windows (mobile screens).

What I want on wide screens is this:

[image 1][image 2][text 1]
[image 3][image 4][text 2]

On a mobile I'd like to see this:

[image 1][image 2]
[image 3][image 4]
[text 1] [text 2]

What I'm currently getting on mobile or narrow desktop windows is:

[image 1][image 2]
[text 1]
[image 3][image 4]
[text 2]

Here is a jsfiddle link. The code is also below:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <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">
 </head>
 <body>
 <div class="container">

 <div class="panel-group">
 <div class="panel panel-primary">
 <div class="panel-heading">Panel Header</div>
 <div class="panel-body">

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div> 
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 </div>
 </div>
 </div>
 </div>
 </body>
</html>

asked Nov 10 at 18:56

remi

343421

add a comment |

up vote
0
down vote

favorite

I'm using the bootstrap grid system, and I'm trying to get a correct view on both wide windows (desktop, tablet) and narrow windows (mobile screens).

What I want on wide screens is this:

[image 1][image 2][text 1]
[image 3][image 4][text 2]

On a mobile I'd like to see this:

[image 1][image 2]
[image 3][image 4]
[text 1] [text 2]

What I'm currently getting on mobile or narrow desktop windows is:

[image 1][image 2]
[text 1]
[image 3][image 4]
[text 2]

Here is a jsfiddle link. The code is also below:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <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">
 </head>
 <body>
 <div class="container">

 <div class="panel-group">
 <div class="panel panel-primary">
 <div class="panel-heading">Panel Header</div>
 <div class="panel-body">

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div> 
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 </div>
 </div>
 </div>
 </div>
 </body>
</html>

asked Nov 10 at 18:56

remi

343421

I'm using the bootstrap grid system, and I'm trying to get a correct view on both wide windows (desktop, tablet) and narrow windows (mobile screens).

What I want on wide screens is this:

[image 1][image 2][text 1]
[image 3][image 4][text 2]

On a mobile I'd like to see this:

[image 1][image 2]
[image 3][image 4]
[text 1] [text 2]

What I'm currently getting on mobile or narrow desktop windows is:

[image 1][image 2]
[text 1]
[image 3][image 4]
[text 2]

Here is a jsfiddle link. The code is also below:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <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">
 </head>
 <body>
 <div class="container">

 <div class="panel-group">
 <div class="panel panel-primary">
 <div class="panel-heading">Panel Header</div>
 <div class="panel-body">

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 <div class="row">
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div>
 <div class="col-xs-4">
 <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="" height="128" width="128"/>
 </div> 
 <div class="col-md-3 border border-primary">
 some text.........
 </div>
 </div>

 </div>
 </div>
 </div>
 </div>
 </body>
</html>

html twitter-bootstrap grid

asked Nov 10 at 18:56

remi

343421

asked Nov 10 at 18:56

remi

343421

asked Nov 10 at 18:56

remi

343421

asked Nov 10 at 18:56

remi

343421

asked Nov 10 at 18:56

remi

343421

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

you can use css for text

position:absolute;

and change location text.
or create one div and put in texts and set display:none when screen change to mobile set show and hide default texts.

answered Nov 10 at 19:10

Ali Naeimi

445512

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242354%2fbootstrap-grid-configure-correct-alignment%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

you can use css for text

position:absolute;

and change location text.
or create one div and put in texts and set display:none when screen change to mobile set show and hide default texts.

answered Nov 10 at 19:10

Ali Naeimi

445512

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

add a comment |

up vote
0
down vote

you can use css for text

position:absolute;

and change location text.
or create one div and put in texts and set display:none when screen change to mobile set show and hide default texts.

answered Nov 10 at 19:10

Ali Naeimi

445512

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

add a comment |

up vote
0
down vote

you can use css for text

position:absolute;

and change location text.
or create one div and put in texts and set display:none when screen change to mobile set show and hide default texts.

answered Nov 10 at 19:10

Ali Naeimi

445512

you can use css for text

position:absolute;

and change location text.
or create one div and put in texts and set display:none when screen change to mobile set show and hide default texts.

answered Nov 10 at 19:10

Ali Naeimi

445512

answered Nov 10 at 19:10

Ali Naeimi

445512

answered Nov 10 at 19:10

Ali Naeimi

445512

answered Nov 10 at 19:10

Ali Naeimi

445512

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

add a comment |

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

I was hoping to fix it using correct column codes, such as ´col-xs-6´ etc.
– remi
Nov 10 at 20:27

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj