Highlighted

Problems with bootstrap and button areas.

Participant ,
Mar 01, 2018

Copy link to clipboard

Copied

Image1.jpg

I am trying to achieve the above for the website I am creating but having problems.

What I want id for the logo to appear in area shown and then clickable links 1-4 which take you to the respective articles.

At the moment I am getting the logo and then 1-4 stacked instead of in the arrangement shown on a b=mobile.

I am using DW CS6 and Bootstrap 3

Any feedback greatly welcome - thank you in advance.

Terry

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-12 col-lg-6">

<img class="img-responsive" src="http://ourartgallery.azurewebsites.net/_img/OurArtGalleryLogo.gif" alt="Logo">

</div>

<div class="col-sm-12 col-lg-6">

<!--nested divs-->

<div class="row" style="margin-top:10vh">

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-primary">Button 1</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-danger">Button 2</a> </div>

<div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-success">Button 3</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-info">Button 4</a> </div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Views

253

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Problems with bootstrap and button areas.

Participant ,
Mar 01, 2018

Copy link to clipboard

Copied

Image1.jpg

I am trying to achieve the above for the website I am creating but having problems.

What I want id for the logo to appear in area shown and then clickable links 1-4 which take you to the respective articles.

At the moment I am getting the logo and then 1-4 stacked instead of in the arrangement shown on a b=mobile.

I am using DW CS6 and Bootstrap 3

Any feedback greatly welcome - thank you in advance.

Terry

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-12 col-lg-6">

<img class="img-responsive" src="http://ourartgallery.azurewebsites.net/_img/OurArtGalleryLogo.gif" alt="Logo">

</div>

<div class="col-sm-12 col-lg-6">

<!--nested divs-->

<div class="row" style="margin-top:10vh">

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-primary">Button 1</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-danger">Button 2</a> </div>

<div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-success">Button 3</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-info">Button 4</a> </div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Views

254

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

At a high level this is what I see with your bootstrap design you are looking for:

  • Logo - col-lg-6 col-sm-12
  • Img [1-4] - col-lg-3 col-sm-6

That will make your logo half width for larger screens and full width for mobile and your images 3 columns for large and 6 for small screens.  Without seeing your code, if you are experiencing issues, or without understanding spacing that will fill the columns to account for the 12-column bootstrap width.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
Participant ,
Mar 01, 2018

Copy link to clipboard

Copied

I have done as you said Ben but I get the same issue.

I have created a sample website area on my azure space for you to see what I am getting.

Ideally I want the four boxes to stay together in the right hand division of the screen.

I have tried with a table but can not get this to fill 100% of the area of the div to the right as you can see in the top example.

In the bottom example I am not getting the boxes side by side in the area as desired in my illustration on the top of this post.

My test website is Our Art Gallery- Paul and Terry

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-12 col-lg-6">

<img class="img-responsive" src="http://ourartgallery.azurewebsites.net/_img/OurArtGalleryLogo.gif" alt="Logo">

</div>

<div class="col-sm-12 col-lg-6">

<!--nested divs-->

<div class="row" style="margin-top:10vh">

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-primary">Button 1</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-danger">Button 2</a> </div>

<div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-success">Button 3</a> </div>

<div class="col-sm-6">

<a href="#" class="btn btn-lg btn-block btn-info">Button 4</a> </div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
Participant ,
Mar 01, 2018

Copy link to clipboard

Copied

I thank you for this reply - I assume this can also apply to be areas if I want to put four pictures with text in them instead of buttons?

I actually want this to end up as a blog like site but this is the start.

I have looked at other templates but want to understand how the site is constructed rather than use a WYSIWYG approach.

Thank you everyone for the feedback.

Terry

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 0
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

Yes, you could use images instead of buttons.

There are Bootstrap blog templates you could use as a starting point.

https://startbootstrap.com/template-categories/blogs/

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 0
Participant ,
Mar 02, 2018

Copy link to clipboard

Copied

Thank you for all the replies.

My problem goes one step further now.

I have put up two images.

They appear ok when viewed full screen, and OK when viewed on mobile but they go to mobile (single column) far too early when viewed on a tablet sized screen.

Is this using a wrong class style causing this?

This is only a hobby website - non commercial.

http://ourartgallery.azurewebsites.net/

Please can anyone advise whether I should change the bootstrap style or am I using the wrong set?

Thank you in advance

Terry

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2018 0
Adobe Community Professional ,
Mar 03, 2018

Copy link to clipboard

Copied

If you need a transition between the large and small columns there is a medium column width you can use.  col-md-[size].  This page here will give you all of the details about the breakpoints to help you out.

https://getbootstrap.com/docs/3.3/css/#grid

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2018 0
Adobe Community Professional ,
Mar 03, 2018

Copy link to clipboard

Copied

Pay attention to  code errors. 

Showing results for http://ourartgallery.azurewebsites.net/ - Nu Html Checker

<center> is obsolete.  Browsers may not respect it much longer.  Instead, use the built-in Bootstrap helper class called center-block.

More on Bootstrap CSS Helper Classes

Bootstrap CSS Helper Classes Reference

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2018 0
Adobe Community Professional ,
Mar 03, 2018

Copy link to clipboard

Copied

I often use an inline list of thumbnail  images for galleries.  See link below for details.

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2018 1