Creating colorful containers using Bootstrap

Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size:

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

I would like the text to align next to the corresponding colored box. Thank you in advance

htmlcssbootstrap-4

Answer №1

Utilize the bootstrap grid system to adjust the size of each box. Below is the code snippet for reference -

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

<div class="row">
<div class="col-2 p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="col-2 p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="col-2 p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="col-2 p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="col-2 p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="col-2 p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="col-2 p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="col-2 p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="col-2 p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>

For creating square blocks, you can use the following CSS snippet -

.row{
  display:flex;
  justify-content:center;
}

.row>*{
  display:flex;
  height:200px ;
  width:200px ;
  justify-content:center;
  align-items:center;
  border: 1px solid black;
  margin: 10px;
}

*{
  background-color: CornSilk;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
</div>

If you need assistance with something else, feel free to reach out. I hope this information proves helpful!

Answer №2

Your layout is not correct. You can align the color next to the text within the same container.

Here is an example of how it should be structured:

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

<div class="row"> <!-- Sometimes bootstrap override display -->
      <div class="col text-black">
       .bg-primary
      </div>
      <div class="col bg-primary">
       <div style="padding: 50px;"></div> <!-- For demonstration -->
      </div>
    </div>

Answer №3

If you're looking to create a box with text beside it, you'll need to incorporate two different divs/spans within a div. One way to achieve this is by utilizing the bootstrap grid system. Here's how you can do it:

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

<div class="row m-2">
  <div class="col-6 p-3 mb-2 bg-primary text-white"></div><span class="p-3 mb-2"> => .bg-primary</span>
</div>
<!-- More code examples for different colors -->

For square blocks, you can modify the code as follows:

.row>* {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
  <div class="bg-primary text-white"></div><span> => .bg-primary</span>
</div>
<!-- More code examples for different colors -->

Find out more about the bootstrap grid system here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update options in HTML form dropdowns dynamically based on selections from other dropdowns using Node.js

In my Node.js application, I have the following file system structure: public elegant-aero.css stadium-wallpaper.jpg team-results.html public.js app.js teamresults.mustache I am trying to dynamically populate a dropdown menu based on user sele ...

htmlnode.jsformsexpressvalidation

Align the prices of products in a uniform position within each table cell

Apologies for the lengthy explanation. I am working with osCommerce and have a page that displays all our product specials in a 3 column table layout. My challenge is to align the price of each product so that they are aligned perfectly across the screen. ...

phphtmlhtml-tablevertical-alignmentoscommerce

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

How can I center a background-image vertically, which has a fixed background-attachment and is positioned 100px from the top? The background-size property is set to cover for horizontal centering but the vertical alignment is off. Below is the HTML code: ...

javascriptjqueryhtmlcss

The alignment of inline divs is off and they are not forming a straight row

From my understanding, adding display:inline to divs with a relative position should align them (left to right) similar to float:left. I attempted both methods but with no success. Below is an example of my latest try with inline displaying. My goal is to ...

javascripthtmlcss

Issue with Bootstrap dropdown-menu alignment when image_tag contains the "center-block" class

<ul class="logo"> <li class="navtabs dropdown"> <a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <%= image_tag('Thumbnailimagestufffurr ...

htmlcssruby-on-railstwitter-bootstrap

Ways to widen a selected drop-down menu outside the dialog box containing it

I'm working with a Html.DropDownList that has been styled using Chosen within a jQuery UI dialog. As the list of items is quite long, when it's opened, it gets cut off by the border of the dialog window. Is there a way to extend the dropdown por ...

jqueryhtmljquery-uijquery-ui-dialogjquery-chosen

Issue with Bootstrap landing page layout - Container not adjusting to screen size correctly

Currently, I am engaging in a project to develop a landing page using Bootstrap as part of my practice. Unfortunately, I encountered an issue with the layout as the container does not align properly with the screen size. This imbalance causes the screen or ...

htmlfrontendcontainersbootstrap-5

What is the correct way to cite an inner class?

Exploring the world of Material UI styling for the first and probably last time, I find myself in a bit of a bind. In my current code setup, I have a question regarding the following structure: .map(section => ( <Section className={classNames(clas ...

cssreactjsmaterial-uijsx

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

javascriptjqueryhtmlcss

The button must be programmed to remove a specific item from the server

I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...

javascripthtmlnode.jsexpressexpress-handlebars

"Is there a virtual keyboard available that supports multiple inputs and automatically switches to the next input when the maximum length

Looking to build a virtual keyboard with multiple inputs that automatically switch to the next input field after reaching the maximum length. Currently having an issue where I can only fill the first input and not the second one. Any assistance in resolvin ...

javascripthtmljqueryajax

Injecting variable styles into my VueJS component

I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To ac ...

javascriptcssvue.js

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

htmlcssgoogle-chromemicrosoft-edgebootstrap-4

New update: Bootstrap 4 Beta 2 introduces aligned right navbar with no collapsing

I want to design a navigation bar that consists of a button on the left side, two icons, and then buttons aligned to the far right. I have managed to find some examples that work, but I am facing an issue where the buttons collapse on smaller screens. Thi ...

twitter-bootstrapbootstrap-4

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

cssbootstrap-5

Is Material UI equipped to handle CSS Container Queries?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Recently introduced container queries for CSS are an exciting development. I'm curious if MUI 5.0 already supports them out of the box. It seems that the current SxProps do not in ...

cssreactjsmaterial-uicontainer-queries

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Ensure that site content remains visible above the table when refreshing the Ajax Table

Whenever I update the table, the content above it ends up below the table. This is frustrating because the content should not be affected by the refresh. How can I resolve this issue? <!DOCTYPE html> <html> <head> <titl ...

jquerycssajaxhtml-table

The dropdown menu fails to function when placed within a div or generated dynamically

When I try to utilize the "dropdown-menu" outside of a div, it works correctly. However, when it is placed inside a div or added dynamically, it does not work as intended. Here is an example on jsfiddle The code snippet is as follows: <link rel="s ...

javascripthtmljquerydrop-down-menubootstrap-5