Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Question

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation.

We are focusing on a call to action section that perfectly aligns with the 12 column grid system at its extremes on the left and right sides.

The design also demands that it stretches seamlessly to the view-port edges:

A bold red background spans all the way to the edge on the left side.
On the right side, a textured grey background extends stylishly to the view-port edge.

Although I am having trouble finding references or search terms for this particular layout, let alone where to start (apart from utilizing the background in full width for cta, then adding an element overlay on the left).

Any suggestions on how to code the following graphical layout using bootstrap?

<section class="cta" style="background: grey; position: relative">
    <div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
    <div class="text-outer">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">left</div>
                <div class="col-xs-6">right</div>               
            </div>
        </div>
    </div>      
</section>

https://i.sstatic.net/Dzwww.png

html css twitter-bootstrap

Answer 1

Answer №1

Starting with the

<div class="container-fluid">

, I have made assumptions about your page layout. Here is a proposed solution:

Take a look at the code snippet below:

.cntn {
  border: 1px red solid;  /* You can remove this if not required */
}
.red {
  background-color: red;
  text-align: right;
  margin: 0;   /* Optional */
  width: 100px; /* Adjust as needed */
  float: left;
}
.cta {
  margin: 0;  /* Optional */
  float: right;
  border: 1px solid green;  /* You can remove this if unnecessary */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Create a fluid container -->
<div class="container-fluid">
  <div class="row">
    <!-- Heading area: Hexagon -->
    <div class="red">
      <img src="http://placehold.it/100/100" />
    </div>

    <!-- Heading area: Call-to-Action -->
    <section class="cta">
      Action
    </section>
  </div>
  <div class="row cntn">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>

</div>

Answer 2

Starting with the

<div class="container-fluid">

, I have made assumptions about your page layout. Here is a proposed solution:

Take a look at the code snippet below:

.cntn {
  border: 1px red solid;  /* You can remove this if not required */
}
.red {
  background-color: red;
  text-align: right;
  margin: 0;   /* Optional */
  width: 100px; /* Adjust as needed */
  float: left;
}
.cta {
  margin: 0;  /* Optional */
  float: right;
  border: 1px solid green;  /* You can remove this if unnecessary */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Create a fluid container -->
<div class="container-fluid">
  <div class="row">
    <!-- Heading area: Hexagon -->
    <div class="red">
      <img src="http://placehold.it/100/100" />
    </div>

    <!-- Heading area: Call-to-Action -->
    <section class="cta">
      Action
    </section>
  </div>
  <div class="row cntn">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>

</div>

Answer 3

Answer №2

To switch from 'div class="container"' to 'div class="container-fluid"', you just need to update the class name.

Answer 4

To switch from 'div class="container"' to 'div class="container-fluid"', you just need to update the class name.

Answer 5

Answer №3

Is this what you had in mind? Instead of black, the gradient should be grey and max-width:400px can vary.

.cta {
  overflow-x: hidden;
  position: relative
}

.text-outer .container {
  width: 100%;
  max-width: 400px;
  background: grey;
  z-index: 2;
  position: relative;
}

.text-outer:before,
.text-outer:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

.text-outer:before {
  background-color: red;
  left: 0;
}

.text-outer:after {
  background-color: grey; /*Changed from black to grey*/
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
  <div class="text-outer">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">left</div>
        <div class="col-xs-6">right</div>
      </div>
    </div>
  </div>
</section>

Answer 6

Is this what you had in mind? Instead of black, the gradient should be grey and max-width:400px can vary.

.cta {
  overflow-x: hidden;
  position: relative
}

.text-outer .container {
  width: 100%;
  max-width: 400px;
  background: grey;
  z-index: 2;
  position: relative;
}

.text-outer:before,
.text-outer:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

.text-outer:before {
  background-color: red;
  left: 0;
}

.text-outer:after {
  background-color: grey; /*Changed from black to grey*/
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
  <div class="text-outer">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">left</div>
        <div class="col-xs-6">right</div>
      </div>
    </div>
  </div>
</section>

Answer 7

Answer №4

Check out this jsFiddle link

I have designed a layout with 3 divs named Left, Center, and Right. However, if you only need Left and Center, you can create your own custom class. The code below should help you achieve that:

.custom {
    width:calc(100% - (50% - 768px/2));
}

.custom {
    width:calc(100% - leftCellWidth);
}

You can adjust the height of the left div according to the height of the hex image.

Answer 8

Check out this jsFiddle link

I have designed a layout with 3 divs named Left, Center, and Right. However, if you only need Left and Center, you can create your own custom class. The code below should help you achieve that:

.custom {
    width:calc(100% - (50% - 768px/2));
}

.custom {
    width:calc(100% - leftCellWidth);
}

You can adjust the height of the left div according to the height of the hex image.

Answer 9

Answer №5

To achieve a full-width layout, use the jumbotron class outside of the container class. You can find more information on this here.

Here is an example in HTML:

<div class="jumbotron">
   <div class="container">
     <div class="row">
        <div class="red col-xs-4">
        </div>
        <div class="grey col-xs-8">
        </div>
     </div
   </div>     
</div>

And the corresponding CSS:

.red {
  background: url('awesomeredimage.png');
  background-size: cover;
}
.grey {
  background: url('awesomegreyimage.png');
  background-size: cover;
}

Answer 10

To achieve a full-width layout, use the jumbotron class outside of the container class. You can find more information on this here.

Here is an example in HTML:

<div class="jumbotron">
   <div class="container">
     <div class="row">
        <div class="red col-xs-4">
        </div>
        <div class="grey col-xs-8">
        </div>
     </div
   </div>     
</div>

And the corresponding CSS:

.red {
  background: url('awesomeredimage.png');
  background-size: cover;
}
.grey {
  background: url('awesomegreyimage.png');
  background-size: cover;
}

Answer 11

Answer №6

It is important to ensure that all your divs are enclosed within the container div. One helpful suggestion is to use container-fluid for greater flexibility. The code snippet below demonstrates this concept:

If you prefer a quick solution, you can simply turn the CTA image into a clickable image by using .img-responsive in a col-xs-12. This revision will only take about 2 minutes:

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="/img/cta.jpg" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="container">
                    <!-- Insert remaining content here -->
                </div>
            </div>
        </div>
    </div>
</section>

Alternatively, you can customize the design by creating columns as shown in the following code snippet. Adjust the sizes according to your preferences:

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 red">
                <img src="/img/hexagon.png" class="img-responsive pull-right">
                <!-- Specify a negative margin for the image to flow over to the grey area -->
            </div>
            <div class="col-xs-1 grey-image"></div>
            <div class="col-xs-3 grey-image">
                <h3 class="text-center">Call to action</h3>
                <p class="text-center">Discount information, etc.</p>
            </div>
            <div class="col-xs-5 grey-image">
                <button class="btn center-block">Request quote</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <!-- Insert remaining content here -->
                </div>
            </div>
         </div>
    </div>
</section>

Answer 12

It is important to ensure that all your divs are enclosed within the container div. One helpful suggestion is to use container-fluid for greater flexibility. The code snippet below demonstrates this concept:

If you prefer a quick solution, you can simply turn the CTA image into a clickable image by using .img-responsive in a col-xs-12. This revision will only take about 2 minutes:

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="/img/cta.jpg" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="container">
                    <!-- Insert remaining content here -->
                </div>
            </div>
        </div>
    </div>
</section>

Alternatively, you can customize the design by creating columns as shown in the following code snippet. Adjust the sizes according to your preferences:

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 red">
                <img src="/img/hexagon.png" class="img-responsive pull-right">
                <!-- Specify a negative margin for the image to flow over to the grey area -->
            </div>
            <div class="col-xs-1 grey-image"></div>
            <div class="col-xs-3 grey-image">
                <h3 class="text-center">Call to action</h3>
                <p class="text-center">Discount information, etc.</p>
            </div>
            <div class="col-xs-5 grey-image">
                <button class="btn center-block">Request quote</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <!-- Insert remaining content here -->
                </div>
            </div>
         </div>
    </div>
</section>

Answer 13

Answer №7

Switch to using class="container-fluid" instead of class="container", then apply the following styling:

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}

Answer 14

Switch to using class="container-fluid" instead of class="container", then apply the following styling:

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Adjust the height of the outer div automatically

Display a pleasant alert message when the file is not recognized as an image during the loading

What are the steps for positioning material-ui icons to the right?

Sticky sidebar that adjusts to viewport size in a responsive layout

Is HTML5 capable of supporting a multi-file uploader system in browsers?

JavaScript preloader function isn't functioning properly when paired with a button

increase the width of the side menu bar to accommodate more content on the Bootstrap

What is the best way to retrieve classes from arrays and apply styling to them using javascript?

Difficulty integrating Bootstrap with JavaScript file in Visual Studio Code

AngularJS radio buttons can now be selected as multiple options

Tips for ensuring elements in a button are not vertically centered

Looking to determine if a specific element is assigned multiple class names

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

Implementing a jQuery method in a PHP page that is loaded through AJAX

What is the reason behind the varying display of values?

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

Struggling to access the height attribute from a CSS file

Implementing a Method to Detect Keypress Event on Anchor Element

Group HTML Tables According to Specific Attributes